vue.config.js配置详解

一、全局 CLI 配置简介

你也可以使用 vue config 命令来审查或修改全局的 CLI 配置

二、vue.config.js用法简介

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

module.exports = {
   
   
  // 选项...
}

三、vue.config.js可配置选项

publicPath

示例：

服务器设置的访问地址为 ip + note

1.不配置
本地请求路径： file:///C:/cfile:///C:/css/app.881ff724.cssss/app.881ff724.css （页面空白）
网络请求路径： http://www.shixiaoshi.site/css/app.881ff724.css （无法访问）
2.配置相对路径

module.exports = {
   
   
    publicPath:'./'
}

   本地请求路径：   file:///C:/Users/Administrator/Desktop/dist/css/app.881ff724.css（正常访问）
   网络请求路径：[http://www.shixiaoshi.site/note/css/app.881ff724.css](http://www.shixiaoshi.site/note/css/app.881ff724.css)（正常访问）

3.配置./app
本地请求路径： file:///C:/Users/Administrator/Desktop/dist/app/css/app.881ff724.css（页面空白）
网络请求路径：http://www.shixiaoshi.site/note/app/css/app.881ff724.css（无法访问）

outputDir

注：使用npm run build （vue-cli-service build）命令打包项目时，如果dist目录已经存在，打包之前原来的dist目录会被删除，构建时传入 --no-clean 可关闭该行为。

 "scripts": {
   
   
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build --no-clean",   //--no-clean 可关闭该行为。
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },

配置建议：不做修改

assetsDir

示例：不做修改，默认打包
示例：默认值修改为static

配置建议：不做修改

indexPath

示例：修改默认为“app/hello”

示例：修改默认为“hello.html”

配置建议：不做修改

lintOnSave

这个值会在 @vue/cli-plugin-eslint 被安装之后生效。

也可以通过设置让浏览器 overlay 同时显示警告和错误：

// vue.config.js
module.exports = {
   
   
  devServer: {
   
   
    overlay: {
   
   
      warnings: true,
      errors: true
    }
  }
}

配置建议：设置为 false，关闭代码检查

productionSourceMap

什么是 source map?
source map 直译过来就是资源地图。使用source map定位的时浏览器控制台可以输出语句在项目文件的某一具体文件位置，便于代码调试。

示例：
在app.vue里 添加这样一条代码：console.log('11111')

打包后查看浏览器控制台：
没有开启 productionSourceMap运行后浏览器控制台显示效果：

开启productionSourceMap运行后浏览器控制台显示效果：

可以看出，开启productionSourceMap后，可以定位到具体的app.vue文件里，便于线上代码调试！

配置建议：设置为 false，线上部署别人不会看到你的源码，更加安全，访问速度更快！

parallel
| 类型 | 默认值 | 含义 |
| --- | --- | --- |
| boolean | require('os').cpus().length > 1 | 启用多核打包 |

css

css.loaderOptions

module.exports = {
   
   
  css: {
   
   
    loaderOptions: {
   
   
      css: {
   
   
        // 这里的选项会传递给 css-loader
      },
      postcss: {
   
   
        // 这里的选项会传递给 postcss-loader
      }
    }
  }
}

支持的 loader 有：

• css-loader
• postcss-loader
• sass-loader
• less-loader

• stylus-loader

  devServer.proxy

  vue项目开发时，会在本地请求某一接口，本地的服务一般是localhost：8080，在请求时会出现跨越问题。
  devServer是请求的一个中间件，可以对请求进行拦截和处理。
  主要应用：

  • 通过代理解决请求跨域的问题
  • 修改请求的路径
    | 类型 | 默认值 | 含义 |
    | --- | --- | --- |
    | string | Object |
    | 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。 |

解决方案：
方法一: 最简单的就是直接替换请求地址（xxx.config.js）

说明：
优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

方法二: 常用的方式（xxx.config.js）

module.exports = {
   
   
    devServer: {
   
   
      proxy: {
   
   
      '/api1': {
   
   // 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {
   
   '^/api1': ''}
      },
      '/api2': {
   
   // 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {
   
   '^/api2': ''}//路径的正则替换
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
   pathRewrite：本地请求的路径经过正则匹配传递给服务器的实际路径，如本地为"/api2"，传递给服务器后为"/"
*/

说明：
优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

注意：Vue配置的代理仅在本地开发下有效（打包后配置文件就木有用了！）