Vue.config.js 配置项

Vue.config.js 配置项

• publicPath

  打包后的路径，默认值是 './'

• outputDir

  打包后文件的名称

• assetsDir

  把项目的静态资源都放进这个目录，写个目录名就可以了，它是相对于 outputDir 的目录

  （挺好用，不然它会把 css 等文件就放在 /dist 目录下，看起来不简洁）

• devServer

  注意，所有 webpack-dev-server 的选项都支持

  所以可以在这个里面配置 端口号 等操作，例如

  devServer: {
      host: '127.0.0.1',  // 默认是 0.0.0.0
      port: 9999,
      open: true
  },
  

  相当于如下配置

  "serve": "vue-cli-service serve --open --hot --host 127.0.0.1 --port 9999"
  

  因为我挺喜欢 open 配置项的，所以我单独拉出来细讲一下（它能自定义打开的路径哦）

  devServer: {
    host: '127.0.0.1',
    https: true,  // 使用 https 协议打开网页
    port: 9999,
    open: ['/my-page'],  // http://127.0.0.1:9999/my-page
      		        // 相当于 npx webpack serve --open /my-page
    open: ['/my-page', '/another-page']  // 这个数组里面的，都能访问，它们等价
      					 // 相当于npx webpack serve --open /my-page --open /another-page
  }
  

  open: {
    app: {
      name: 'chrome'  // 指定启动时打开的浏览器，换成 firefox 就是火狐
        	      // npx webpack serve --open-app-name 'google-chrome'
                  // 或者
                  // npx webpack serve --open 'chrome.exe'
    }
  },
  

  • devServer.proxy

    代理，只有在 public 目录下找不到的文件，才会走代理

• productionSourceMap

  默认值是 true，设置为 false 可加速生产环境构建

• chainWebpack

  支持对 webpack 配置进行更细粒度的修改，这是一个例子，有机会看下能不能用

  chainWebpack: config => {
  config.resolve.alias
    .set('@', resolve('src'))
    .set('style', resolve('src/assets/style'))
    .set('img', resolve('src/assets/img'))
    .set('components', resolve('src/components'))
  }
  

相关链接：

https://cli.vuejs.org/zh/config/