#yyds干货盘点#vue.config.js配置解析

最近的项目都是基于vue2.0来做开发，这时候在配置webpack的时候遇到了个性化的配置，在根目录创建​​vue.config.js​​去完成​​webpack​​的一些特殊配置,默认它会被 ​​@vue/cli-service​​ 自动加载。

基本配置

module.exports = {
    productionSourceMap: false,
    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'assets',
    devServer: {
        port: 8090,
        host: '0.0.0.0',
        https: false,
        open: true
    },
    // 其他配置
    ...
复制代码
复制代码

• productionSourceMap：生产环境是否要生成 sourceMap
• publicPath：部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致

• 可以通过三元运算去配置​​dev​​和​​prod​​环境, ​​publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : './'​​

• outputDir: build 时输出的文件目录
• assetsDir: 放置静态文件夹目录
• devServer: dev环境下，webpack-dev-server 相关配置

• port: 开发运行时的端口
• host: 开发运行时域名，设置成​​'0.0.0.0'​​,在同一个局域网下，如果你的项目在运行，同时可以通过你的​​http://ip:port/...访问你的项目​​
• https: 是否启用 ​​https​​
• open: ​​npm run serve​​ 时是否直接打开浏览器

完整基础版配置如下：

module.exports = {
  publicPath: './',  // 基本路径
  outputDir: 'dist', // 构建时的输出目录
  assetsDir: 'static', // 放置静态资源的目录
  indexPath: 'index.html', // html 的输出路径
  filenameHashing: true, // 文件名哈希值
  lintOnSave: false, // 是否在保存的时候使用 `eslint-loader` 进行检查。

  // 组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
  // template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
  // runtime-only：将template在打包的时候，就已经编译为render函数
  // runtime-compiler：在运行的时候才去编译template
  runtimeCompiler: false,

  transpileDependencies: [], // babel-loader 默认会跳过 node_modules 依赖。
  productionSourceMap: false, // 是否为生产环境构建生成 source map

  //调整内部的 webpack 配置
  configureWebpack: () => { },

  chainWebpack: () => { },

  // 配置 webpack-dev-server 行为。
  devServer: {
    open: true, // 编译后默认打开浏览器
    host: '0.0.0.0',  // 域名
    port: 8080,  // 端口
    https: false,  // 是否https
    // 显示警告和错误
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:10001',
        changeOrigin: true, // 是否跨域
        ws: false, // 是否支持 websocket
        secure: false, // 如果是 https 接口，需要配置这个参数
        pathRewrite: { // 可以理解为一个重定向或者重新赋值的功能
          '^/api': ''    // '^/api': '/'    这种接口配置出来     http://127.0.0.1:10001/login
        }               // '^/api': '/api'  这种接口配置出来     http://127.0.0.1:10001/api/login
      }
    }
  }
}

插件及规则的配置

在​​vue.config.js​​​如果要​​新增/修改​​​ ​​webpack​​​ 的 ​​plugins​​​ 或者 ​​rules​​ , 有2种方式。

​​configureWebpack​​ 方式

configureWebpack 是相对比较简单的一种方式

• 它可以是一个​​对象​​：和 ​​webpack​​ 本身配置方式是一致，该对象将会被 ​​webpack-merge​​ 合并入最终的 ​​webpack​​ 配置
• 它也可以是一个​​函数​​：直接在函数内部进行修改配置

configureWebpack: {
    rules:[],
    plugins: []
  }
configureWebpack: (config) => {
    // 例如，通过判断运行环境，设置mode
    config.mode = 'production'
} 
复制代码
复制代码

​​chainWebpack​​ 方式

这个方式比较复杂，这里不做过多阐述。