vue.config.js的常用配置

const path = require(‘path‘)
const glob = require(‘glob‘)
const resolve = (dir) => path.join(__dirname, dir)
const PAGES_PATH = ‘./src/pages/*/*.js‘

module.exports = {
 //  publicPath: ‘/test/‘,  // 设置部署应用包时的基本URL
  publicPath: process.env.NODE_ENV === ‘production‘ ? ‘/test/‘ : ‘./‘, // 开发环境与生产环境的区分
  //outputDir: ‘testbuild‘, // 运行build 时生产的构建文件的目录,默认‘dist‘
  // assetsDir: ‘assets‘, // build之后生成的静态资源放置的目录,默认‘‘
  // indexPath: ‘test/home.html‘, // build之后生成的index.html的路径
  // filenameHashing: true, // build之后生成的静态资源默认情况下加了hash值以控制静态资源的缓存,默认是true
  // pages: {
  //   index:{
  //     entry: ‘src/pages/index/main.js‘, // page入口
  //     template: ‘public/index.html‘, // public 里面的文件
  //     filename: ‘index.html‘, // build之后生成的文件及路径名
  //     title: ‘Index Page‘,
  //     chunks: [‘chunk-vendors‘, ‘chunk-common‘, ‘index‘]
  //   },
  //   page1:{
  //     entry: ‘src/pages/page1/main.js‘, // page入口
  //     template: ‘public/page1.html‘, // public里面的文件
  //     filename: ‘page1.html‘, // build之后生成的文件及路径名
  //     title: ‘page1‘, // 使用此项时,// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  //     chunks: [‘chunk-vendors‘, ‘chunk-common‘, ‘page1‘] // 提取出来的通用 chunk 和 vendor chunk
  //   },
  //   page2:{
  //     entry: ‘src/pages/page2/main.js‘, // page入口
  //     template: ‘public/page2.html‘,
  //     filename: ‘page2.html‘, // build之后生成的文件及路径名
  //     title: ‘Index Page‘,
  //     chunks: [‘chunk-vendors‘, ‘chunk-common‘, ‘page2‘]
  //   }
  // },
  pages:setPages(),
  productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
  // devServer: {
  //   port: ‘1111‘,
  //   // proxy: ‘http://localhost:8080‘  //告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:8080。
  //   proxy: {
  //     ‘/api‘: {
  //       //要访问的跨域的域名
  //       target: ‘http://localhost:8080‘,
  //       ws: true, // 是否启用websockets
  //       secure:false, // 使用的是http协议则设置为false,https协议则设置为true
  //       changOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样客户端端和服务端进行数据的交互就不会有跨域问题
  //       pathRewrite: {
  //           ‘^/api‘: ‘‘
  //       }
  //     }
  //   }
  // },
  chainWebpack: config => {
    /* 自动导入公共文件*/
    const types = [‘vue-modules‘, ‘vue‘, ‘normal-modules‘, ‘normal‘]
    types.forEach(
      type => addStyleResource(config.module.rule(‘scss‘).oneOf(type))
    )

    /* 添加别名*/
    config.resolve.alias
      .set(‘@title‘, resolve (‘src/assets/commonPublic/title.vue‘))
  }
}

/**
 * 注入公共样式
 * @param rule
 */
function addStyleResource (rule) {
  rule.use(‘style-resource‘)
    .loader(‘style-resources-loader‘)
    .options({
      patterns: [
        path.resolve(__dirname, ‘src/assets/common.scss‘) // resolve()返回绝对路径
      ]
    })
}

/**
 * 多页面跳转
 */
function setPages () {
  let pages = {}
  glob.sync(PAGES_PATH).forEach(filepath => {
    let fileList = filepath.split(‘/‘)
    let fileName = fileList[fileList.length - 2]

    pages[fileName] = {
      entry: filepath,
      template:`public/${fileName}.html` , // ‘public/index.html‘
      filename: `${fileName}.html`,
      // title:
      chunks: [‘chunk-vendors‘, ‘chunk-common‘, fileName]
    }
  })
  return pages
}

对应生成的dist文件目录及多页面配置时的文件目录如下:

原文地址:https://www.cnblogs.com/layaling/p/12050600.html

时间: 2024-11-10 15:53:38

vue.config.js的常用配置的相关文章

vue cli 3 查看项目 vue.config.js 的默认配置信息

vue cli 3 查看项目 vue.config.js 的默认配置信息 运行命令,在终端输出: npx vue-cli-service inspect 运行命令,将输出导入到文件:vue.config.detail.js: npx vue-cli-service inspect >> vue.config.detail.js 在文件:vue.config.detail.js 开头,添加:module.exports =,然后格式化即可查看. 原文地址:https://www.cnblogs.

vue.config.js 极简化配置 参考!

前提: 在开发环境下,axios.defaults.baseURL = '', 即不设置axios的前缀 ! 方法一: 这个是接口在开发环境中的接口形式,以/api 形式开头. 然后vue.config.js 配置如下 module.exports = { publicPath: '', // 为空,则项目可放在服务器任何位置 outputDir: "../teamemory", //打包后的文件夹名字及路径 devServer: { // 开发环境跨域情况的代理配置 proxy: {

vue.config.js常用配置

/ vue.config.js 常用配置 module.exports = { // 基本路路径, vue.cli 3.3以前请使用baseUrl publicPath: '/', // 输出文件目录 outputDir: 'dist', // ?用于嵌套生成的静态资产(js,css,img,fonts)的目录. assetsDir: '', // ?生产环境sourceMap productionSourceMap: true, // webpack配置 configureWebpack: (

vue-cli3 vue.config.js常用的配置

基础: module.exports = { // 选项... } 使用publicPath找到服务端的路径 ( 后端api和项目在同一目录下 ) module.exports = { publicPath: './' } 构建项目时打包的位置 module.exports = { outputDir: 'dist', } eslint代码检测 lintOnSave : ture | false | 'error' devserve相关配置 devServer: { open: true,//设

【vue-cli 3.0】 vue.config.js配置 - 路径别名

如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以全部统一在vue.config.js中,很方便有没有,从此以后一个配置文件走遍公司大小项目,妈妈再也不用担心我每次新建项目时重新配置各个复杂的选项了.那么怎么在vue.config.js中配置路径别名呢? 1. 创建项目 2. 在根目录下新建 vue.config.js 3. 修改vue.confi

vue-cli3 vue.config.js配置

vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的配置,

vue3.0 vue.config.js配置

搭建好脚手架会发现,对比vue2.0版本少了build.webpack等的配置. vue cli3.0项目中需要配置其他参数时,需要新建文件'vue.config.js',与package.json在同一级目录下. module.exports = { // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根部, // 比如 https://www.my-app.com/ // 如果你的应用时部署在一个子路径下,那么你需要在这里 // 指定子路径.比如,如果你的应用部署在 // h

vue.config.js模板

关于vue cli3.0中vue.config.js的配置,我看着官网走了一遍,整理了一下,因为配置项比较多,所以有的我就没放,给出了链接.(可以看链接里面自己配置哦) // vue.config.js module.exports = { // type :string defalut :"/" // 把开发服务器架设在根路径 publicPath: process.env.NODE_ENV === 'produvtion' ? '/production-sub-path/' : '

vue cli3之vue.config.js配置

const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { // publicPath: process.env.NODE_ENV === 'production'?'/':'/', // i18n chainWebpack: config => { config.module .rule('i18n') .resourceQuery(/blo