vue.config.js配置文件

.env

先说说整个项目的环境吧！

process.env.NODE_ENV为整个项目的node环境其中

 process.env.NODE_ENV==='production'  (打包环境)
 process.env.NODE_ENV==='development' (开发环境)

在整个项目任何文件都可以直接使用这两句命令！如果还想定义其他的全局环境变量，可以在根目录添加.env文件在文件中定义变量方法如下：

VUE_APP_CONTEXT=mim-web
VUE_APP_ASSETS=static

使用定义的环境变量方法如下：

process.env.VUE_APP_CONTEXT
process.env.VUE_APP_ASSETS

module.exports={}

vue.config.js的相关配置放在module.exports={}里

publicPath // 项目部署的基础路径

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。在实战项目中前端项目一般要部署在后端规定的一个子路径下，因此publicPath一般填代理的后端路径，例如：
```
publicPath: `/${process.env.VUE_APP_CONTEXT}`,
`process.env.VUE_APP_CONTEXT`为上文在.env文件中定义的变量，该变量的值为后端代理路径
```
outputDir

 outputDir:"dist",//当运行 vue-cli-service build 时生成的生产环境构建文件的目   录名字 默认为"dist"

assetsDir

assetsDir: 'process.env.VUE_APP_ASSETS,'
//当运行 vue-cli-service build 时生成的生成的静态资源 (js、css、img、fonts) 的   (相对于 outputDir 的) 目录。默认为空，默认与生成的index.html同级。一般`VUE_APP_ASSETS`=static

indexPath

indexPath："index.html"//npm run build之后生成的入口文件 默认为index.html,此属性可以省略，省略了默认就是index.html
或者这样：
const isDev = env === 'development'
const page = isDev ? 'index.html' : 'templates/index.ftl'
module.exports={
 indexPath: page
}
则npm run build之后的入口文件为dist文件下的templates文件夹下的index.ftl

5.lintOnSave

值为true或false,意思为是否在保存代码后进行eslint规则校验，true为开启校验，false为不开启校验。将值设置为error,是把错误直接输出为编译错误。通常情况下，在开发环境下开启校验，在生产环境下不开启校验。例如：

process.env.NODE_ENV !== 'production'，在生产环境上设为false

也可这样写：

const isDev = env === 'development'
module.exports = {
lintOnSave: isDev
}

6.runtimeCompiler

runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右

7. transpileDependencies

 transpileDependencies: [], // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。比如： 你引入的新的依赖为es6的语法，就需要对其进行转译，可将该依赖名称放到该数组中。

例如：

transpileDependencies: [
    'dolphin-plugin-tools',
    'client-container',
    /@hui-pro/,
    '@ermw',
    /hi-map-vue/,
    /hi-map-core/
  ],

8.productionSourceMap

productionSourceMap: !IS_PROD, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建

productionSourceMap值为true时，打包后每个js文件都有一个map文件

map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

productionSourceMap: 改成false后所有打包生成的map文件都没有了！！！打包包体积大小直接从20.6MB变成5.05MB，一下子减少15MB

如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。

9.chainWebpack

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

    config.resolve.symlinks(true); // 修复热更新失效

    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    config.plugin("html").tap(args => {
      // 修复 Lazy loading routes Error
      args[0].chunksSortMode = "none";
      return args;
    });

    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'))
      .set('@const', resolve('src/const'))
      .set('@router', resolve('src/router'))
      .set('@plugins', resolve('src/plugins'))
      .set('@utils', resolve('src/utils'));

    // 压缩图片
    // 需要 npm i -D image-webpack-loader
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        optipng: {
          enabled: false
        },
        pngquant: {
          quality: [0.65, 0.9],
          speed: 4
        },
        gifsicle: {
          interlaced: false
        },
        webp: {
          quality: 75
        }
      });

    // 打包分析, 打包之后自动生成一个名叫report.html文件(可忽视)
    if (IS_PROD) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [{
        analyzerMode: "static"
      }]);
    }
  },

10.devServer

devServer: {
    // clientLogLevel: 'silent' | 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'none' | 'warning', //使用内联模式时，DevTools中的控制台将显示消息，例如在重新加载之前，错误之前或启用热模块更换时。默认为info

    // historyApiFallback: true, // 使用HTML5历史记录API时，index.html可能必须提供该页面以代替任何404回复。devServer.historyApiFallback默认情况下禁用。通过传递启用它

    compress: true, // 为所服务的一切启用gzip压缩

    host: 'localhost', // 指定要使用的主机。默认情况下这是localhost。

    port: 8080, // 端口号
    // 所有 webpack-dev-server 的选项都支持。注意：
    // 有些值像 host、port 和 https 可能会被命令行参数覆写。
    // 有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。

    overlay: { // 让浏览器 overlay 同时显示警告和错误
      warnings: true,
      errors: true
    },

    https: false, // 启用https https:{type:Boolean}

    open: false, // 配置自动启动浏览器

    hot: true, // 热模块替换，就是热更新页面
    // hotOnly: true, // 热更新
    // hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败

    // proxy: 'http://localhost:8080'  // 配置跨域处理, 只有一个代理
    proxy: { //配置多个跨域
      "/api": {
        target: "http://172.11.11.11:7071",
        changeOrigin: true,
        // ws: true,// 允许 websockets 跨域，项目中有用到 websockets 才需要开启
        secure: false,
        pathRewrite: {
          "^/api": "/"
        }
      },
      "/api2": {
        target: "http://172.12.12.12:2018",
        changeOrigin: true,
        //ws: true,//websocket支持
        secure: false,
        pathRewrite: {
          "^/api2": "/"
        }
      },
    }
  }

文章参考events.jianshu.io/p/8e5550606…

vue.config.js相关配置

vue.config.js配置文件

.env

module.exports={}