vue-cli 3.x vue.config.js

记录一些工作中使用到的配置

const webpack = require('webpack')
const path = require('path')

module.exports = {
  baseUrl: './',
  devServer: {
    // 若项目打开，控制台报错 Invalid Host/Origin header，则需要设置此项
    disableHostCheck: true
  },
  chainWebpack: config => {
    // 自定义路径别名
    config.resolve.alias
      // @ 已默认配置为 src 路径，可以使用 vue inspect > output.js 检出配置进行查看
      .set('@', path.join(__dirname, 'src'))
      .set('api', path.join(__dirname, 'src/http/api'))
  },
  configureWebpack: {
    plugins: [
      // 配置全局方法或变量（可以将 path.resolve 和上面自定义路径别名 path.join 比较一下写法）
      new webpack.ProvidePlugin({
        // 具名模块 axios.js export { axios }
        axios: [path.resolve(__dirname, './src/axios'), 'axios'],
        // 默认模块 http.js export default http
        axios: [path.resolve(__dirname, './src/http'), 'default'],
        // 直接使用 node_modules 中的模块
        jQuery: 'jQuery'
      })
    ],
    // 打包时不将 vue vue-router axios 包含在内，在 index.html 中引入这些库的 CDN，这样可以缩小项目的体积
    // 键对应 pakege.json 文件中的模块名称，值对应 CDN 中 return 或添加的全局变量的名称，这样形成映射关系
    // 例如 vue-router，在 pakage.json 中名为 'vue-router'，而在 CDN 中引入的文件却是 rutrn VueRouter。在项目中 import 的名称倒是不讲究，import Route from 'vue-router' 或 import VueRouter from 'vue-router' 都可以
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'axios': 'axios'
    }
  },
  css: {
    // 将样式映射到源文件，能直接看出当前选择样式在 vue 文件中的多少行
    sourceMap: true
  }
}