vue.config.js 常用设置

记录 vue.config.js 各项常用设置，方便使用。

vue.config.js 中的代码整体通过 module.exports 导出一个对象，我们所做的是配置里面的各项 option

// 通过module.exports导出对象
module.exports = {}

1.publicPath
2.outputDir
3.assetsDir
4.indexPath
5.lintOnSave
6.chainWebpack
7.css
8.devServer
9.configureWebpack

1.publicPath

配置打包时的路径。默认值是 '/' 即打包后访问路径没有任何变化。

当这个值改为 '' 或 './' 时，打包后的路径变为相对路径，可以被部署在任意路径。

某些场景会结合 env 使用，例如：

publicPath: process.env.NODE_ENV === "production" ? "/v2" : "/",

生产环境会多出二级路径 /v2

2.outputDir

打包的文件夹名字，默认是 dist 。

也可结合 env 使用：

outputDir: process.env.outputDir || 'dist'

3.assetsDir

打包后放置静态资源 js、css、img、fonts 的文件夹名字（相对于 outputDir 路径）。

assetsDir: 'static'

4.indexPath

打包后生成的 'index.html' 的文件名（相对于 outputDir 路径）。

indexPath: 'index.html'

5.lintOnSave

是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。它的值可以是 boolean | 'warning' | 'default' | 'error'

lintOnSave: process.env.NODE_ENV !== 'production'

上面代码在生产环境中禁用。

6.chainWebpack

是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

上面引用 Vue-Cli 官网。点开链接跳到 webpack-chain 的 github 介绍。

我们大多数情况用它配置引用资源的快捷路径。

chainWebpack: config => {
  config.resolve.alias // 添加别名
    .set('@', resolve('src'))
    .set('@assets', resolve('src/assets'))
    .set('@components', resolve('src/components'))
    .set('@views', resolve('src/views'))
    .set('@store', resolve('src/store'));
},

7.css

配置 css ，这是一个对象，主要看里面的配置项。

7.1.extract

是否使用 css 分离插件 ExtractTextPlugin。这个插件大致的作用是分离 css 样式,防止打包后的样式加载错乱等问题。

css:{
  extract: true
},

7.2.requireModuleExtension

使用 CSS Modules 时可以去掉文件名中的 '.module'


css:{
  requireModuleExtension: true
},

7.3.loaderOptions
向 css 相关的 loader 传递选项
css:{
  loaderOptions:{
    css: { // 这里的选项会传递给 css-loader
      
    },
    postcss: { // 这里的选项会传递给 postcss-loader
      plugins: [require('tailwindcss'), require('autoprefixer')]
    },
    scss: {
      // 这里的选项会传递给 sass-loader
      // 加载全局样式
      prependData: `@import "~@/assets/css/global.scss";`
    },
    less: {
      // 这里的选项会传递给 less-loader
      // 定义全局对象，可加入全局变量
      globalVars: {
        primary: '#06c'
      }
    }
  }
},

8.devServer
配置 webpack-dev-server 的选项。
devServer: {
  host: "0.0.0.0", // 本地 host
  port: 3000, // 设置端口号
  https: false, // 是否启用 https
  open: false, // 启动服务时是否自动打开浏览器
  hotOnly: true, // 是否启用热更新
  overlay: { // 编译错误时，页面全屏覆盖层
    warnings: false,
    errors: true
  },
  proxy: 'http://localhost:4000' // 设置代理
}

devServer 的配置项看上面的注释都很容易理解。主要说说设置代理，上面的 proxy: 'http://localhost:4000' 将任何未知请求 (没有匹配到静态文件的请求) 代理到 http://localhost:4000
官网给出的例子如下：
devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:4000', // 代理地址
      ws: true, // 支持websocket
      changeOrigin: true
    }
  }
}


访问 http://localhost:3000/api 时没有匹配到任何资源，代理到 target 指定的 URL， ws 设置是否支持 websocket，changeOrigin 在开启代理后设置是否在本地创建一个虚拟服务端。

9.configureWebpack

这个值可以是对象或函数。

如果是对象，会通过 webpack-merge 合并到最终的配置中。
如果函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。


上面还是引用 Vue-Cli 官网。
我只贴出自己代码中用到的：
configureWebpack: {
  name: 'some title', 
  resolve: {
    alias: {
      "@": resolve("src"),
    },
  },
},



name 可以在  index.html 中当作标题访问。
resolve 部分和前面 chainWebpack 中设置一样。