vue.config.js配置
1.啥是vu.config.js
Vue-cli2还有build目录，包含了webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件，而vue-cli3学习rollup的零配置思路，项目初始化以后没有build目录，也没有了配置文件。如果我们想做一些相关的配置，需要创建一个vue.config.js来进行数据修改，代理啥的配置。
2.配置详解
vue.config.js文件是一个可选配置文件，存放于根目录，@vue/cli-service启动的时候自动加载。对于一些脚本的配置(环境变量、启动、构建等)可以使用package.json来进行配置。
里面内容大致如下
其他的一条条配置进去就可以
publicPath
{
Type(类型): string
Default(默认): '/'
}
1.项目部署的基础路径
2.我们默认假设你的应用将会部署在域名的根部，
3.比如 https://www.my-app.com/
4.如果你的应用时部署在一个子路径下，那么你需要在这里
指定子路径。比如，如果你的应用部署在
https://www.foobar.com/my-app/
那么将这个值改为 `/my-app/`
拓展：把开发服务器假设在根路径，可以直接使用一个判断
publicPath :process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
outputDir (基本不动，打包目录不都是用那个吗)
{
Type(类型): string
Default(默认): 'dist'
}
1.将构建好的文件输出到哪里（或者说将编译的文件），当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)
outputDir: 'dist'
assetsDir (基本上都是默认)
{
Type(类型): string
Default(默认): ''
}
1.放置生成的静态资源 (js、css、img、fonts) 的目录，即打包以后存放静态资源的目录
assetsDir: 'static'
indexPath (没动过)
{
Type(类型): string
Default(默认): 'index.html'
}
1.指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
filenameHashing (默认就行)
{
Type(类型): boolean
Default(默认): true
}
1默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
注意：这个是比较重要的有延伸，vue感觉上侧重于单页面应用，意思就是只有一个页面，里面的操作都是通过组件的切换来完成的但是你也可以使用多页面
单页面应用(spa)
概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。 优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。 缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。
多页面应用(mpa)
概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。 优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。 缺点：页面跳转较慢。(参考：https://www.jianshu.com/p/52c4913e0bf4)
pages
{
Type(类型): Object
Default(默认): undefined
}
1.在 multi-page（多页）模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
举例子：
// 用于多页配置，默认是 undefined
pages: {
index: {
// 入口文件
entry: 'src/main.js', /*这个是根入口文件*/
// 模板文件
template: 'public/index.html',
// 输出文件
filename: 'index.html',
// 页面title
title: 'Index Page'
},
// 简写格式
// 模板文件默认是 `public/subpage.html`
// 如果不存在，就是 `public/index.html`.
// 输出文件默认是 `subpage.html`.
subpage: 'src/main.js' /*注意这个是*/
},
lintOnSave (默认)
{
Type(类型): boolean | 'error'
Default(默认): true
}
1. 是否在保存的时候使用 `eslint-loader` 进行检查。 有效的值：`ture` | `false` | `"error"` 当设置为 `"error"` 时，检查出的错误会触发编译失败。
lintOnSave: true
runtimeCompiler (默认 我没用过)
{
Type(类型): boolean
Default(默认): false
}
1. 是否使用带有浏览器内编译器的完整构建版本
2. 设置为 true 后你就可以在 Vue 组件中使用 template 选项了，
但是这会让你的应用额外增加 10kb 左右。
transpileDependencies (没用过)
{
Type(类型): Array<string | RegExp>
Default(默认): []
}
1. 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
2. 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
3. babel-loader 默认会跳过 node_modules 依赖。
4. 通过这个选项可以显式转译一个依赖。
productionSourceMap (就只是知道这么个意思)
{
Type(类型): boolean
Default(默认): true
}
1. 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false
crossorigin (不知道)
{
Type(类型): string
Default(默认): undefined
}
1.在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity
(SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。
Webpack相关配置
configureWebpack
Type:Object | Function
1.如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
2.如果这个值是一个函数，则会接收被解析的配置作为参数。
该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
chainWebpack
Type: Function
1.是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。
允许对内部的 webpack 配置进行更细粒度的修改。
eg.
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
chainWebpack(config) {
// it can improve the speed of the first screen, it is recommended to turn on preload
// it can improve the speed of the first screen, it is recommended to turn on preload
config.plugin('preload').tap(() => [
{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
// when there are many pages, it will cause too many meaningless requests
config.plugins.delete('prefetch')
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
}
)
}
Css相关配置
// CSS 相关选项
css: {
extract: true,
Type: boolean | Object
1. 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
2. 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
sourceMap: false,
{
Type(类型): boolean
Default(默认): false
}
1. 是否开启 CSS source map？ 设置为 true 之后可能会影响构建的性能。
loaderOptions: {},
{
Type(类型): Object
Default(默认): {}
}
1. 为预处理器的 loader 传递自定义选项。比如传递给sass-loader 时，使用 `{ sass: { ... } }`。
modules: false
{
Type(类型): boolean
Default(默认): false
}
1.为所有的 CSS 及其预处理文件开启 CSS Modules。
2. 这个选项不会影响 `*.vue` 文件。
},
// 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
// 在多核机器下会默认开启。
parallel: require('os').cpus().length > 1,
// PWA 插件的选项。
// 查阅 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-pwa
pwa: {},
代理配置
//如果你的前端应用和后端 API 服务器没有运行在同一个主机上，
//你需要在开发环境下将 API 请求代理到 API 服务器。
//这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
//配置 webpack-dev-server 行为。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: {
'/api': {
target: 'http://localhost:8880',
changeOrigin: true,
secure: false,
// ws: true,
pathRewrite: {
'^/api': '/static/mock'
// 请求数据路径别名,这里是注意将static/mock放入public文件夹
}
}
},
before: app => {}
},
简洁版
module.exports = {
// publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',
//基本路径
publicPath: './',//默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
// 输出文件目录
outputDir: 'dist',
assetsDir: 'static',
indexPath: 'index.html',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
},
// webpack-dev-server 相关配置
devServer: {
open: false,//open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
host: '0.0.0.0',//默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
port: 8080,
hot: true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
https: false,
hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
proxy: {
'/': {
target: 'http://xxxx:8080', //目标接口域名
secure: false, //false为http访问，true为https访问
changeOrigin: true, //是否跨域
pathRewrite: {
'^/': '/' //重写接口
}
}
}, // 设置代理
before: app => { }
},
// 第三方插件配置
pluginOptions: {
// ...
}
};
参考:
1.
本文来自博客园，作者：orangeScc，转载请注明原文链接：https://www.cnblogs.com/ashScc/p/15685206.html
