vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。也可以使用 package.json 中的 vue 字段，但是这种写法需要严格遵照 JSON 的格式来写。
在vue.config.js中配置
一、新建vue.config.js
二、导出包含选项的对象
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
}
1. devServer配置
devServer: {
port: 8899,
host: 'test.sina.com.cn',
open: true
}
port 端口
host 域名
open 是否自动打开浏览器（默认false） 也可以在package.json 中 scripts 的 serve字段中添加--open
更多配置详见webpack中devServer部分。
2. webpack相关的配置
调整webpack相关的配置就是为vue.config.js中的configureWebpack选项提供一个对象：
如果值是一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。
如果值是一个函数，则参数1为被解析的配置。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
configureWebpack: {
resolve: {
// 起别名
alias: {
'api': resolve('src/api'),
'assets': resolve('src/assets')
}
},
// 添加插件
plugins: []
}
3. chainWebpack
Type: Function
值是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。比如添加新的loader，替换已有规则的loader。
4. css相关配置
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
},
sass: {
// 如果要将scss代码放在实际入口文件之前，sass对象提供data选项，此时 sass-loader 不会覆盖 data 选项，只会将它拼接在入口文件的内容之前。
// 比如全局导入定义了函数和变量的scss文件，如果导入多个，字符串拼接即可。（注意：分号不能丢）
data: `
@import "@/assets/style/mixin.scss";
`
}
}
}
-
4.1
extract生产环境下默认是true，开发环境默认false
是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。
提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。 -
4.2
sourceMap是否开启source map。默认false。开启后会影响构建性能。 -
4.3
loaderOptions向css的loader传递选项。
5. 静态资源目录
assetsDir: 'static'
默认打包文件js、css、images等。设置之后这些文件都会放在static目录下。
6. 文件引用路径
publicPath: process.env.NODE_ENV === 'development' ? '/' : './'
默认： '/'
部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.sina.com.cn/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.sina.com.cn/agent/，则设置 publicPath 为 /agent/。（但是这种方式就依赖于服务端目录名，不灵活）
可以把这个值设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
根据process.env.NODE_ENV判断生产环境还是开发环境，设置不同的值。
7. devServer.proxy
如果单独有后端开发服务器api，并希望在开发环境下将请求代理到服务器，则可以使用该选项。
假如后端api是：http:40.253.25.2:80
devServer: {
// proxy: 'http:40.253.25.2:80',
proxy: {
'/api': {
target: 'http:40.253.25.2:80',
ws: true, // proxy websockets
changeOrigin: true // needed for virtual hosted sites(cross origin)
pathRewrite: {
// '^/api': '',
'^/api': '/new_api',
}
},
'/foo': {
targer: ''
}
}
}
proxy如果是一个直接指向开发服务器的地址，则会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http:40.253.25.2:80。
如果要控制更多代理行为，则proxy提供对象选项。比如/api/users，则会代理到http:40.253.25.2:80/api/users。
如果不想每次都传递/api，或重新设置新的路径名，则可以通过pathRewrite字段重写路径。
更多配置详见http-proxy-middleware。
8. 多页面配置
虽然vue更多的是用于SPA，但有时候会根据项目或业务需求构建多页应用。
通过pages选项对象，每个page对应一个javascript入口，所以其值是一个对象。值的key是入口名，值是entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；或一个指定其 entry 的字符串。
pages: {
index: {
// page的主入口文件
entry: 'src/pages/index/main.js',
// 模板文件
template: 'public/index.html',
// dist 输出的文件名
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'index Page',
// 在这个页面中包含的块，默认情况下会包含提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
detail: {
entry: 'src/pages/detail/main.js',
template: 'public/page1.html',
filename: 'page1.html'
title: 'detail page'
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/find.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `find.html`。
find: 'src/pages/find/main.js'
}
下图是具体项目结构，因人而异：
项目目录
每个页面对应的router配置中最好配置base选项，不仅可以区分页面，还可以更好的管理路由。
如下：
路由配置
9. productionSourceMap
Default: true
如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
网友评论