创建
vue.config.js文件
const path = require(‘path‘)
const resolve = dir => path.join(__dirname, dir)
module.exports = {
publicPath: process.env.NODE_ENV === ‘production‘ ? ‘/‘ : ‘/‘,
// 打包输出
outputDir: "dist",
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: ‘assets‘,
// eslint-loader 是否在保存的时候检查
lintOnSave: process.env.NODE_ENV !== ‘production‘,
// 多线程打包
// parallel: require(‘os‘).cpus().length > 1,
pages: {
index: {
// page 的入口
entry: ‘src/main.js‘,
// 模板来源
template: ‘public/index.html‘,
// 在 dist/index.html 的输出
filename: ‘index.html‘,
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: ‘首页‘,
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: [‘chunk-vendors‘, ‘chunk-common‘, ‘index‘]
},
// 简写格式
// 模板文件默认是 `public/subpage.html`
// 如果不存在，就是 `public/index.html`.
// 输出文件默认是 `subpage.html`.
subpage: ‘src/main.js‘
},
//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右
runtimeCompiler: false,
// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
transpileDependencies: [],
// 设置类型是Sring，设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性
crossorigin: undefined,
//在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
integrity: false,
//需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
//另外，当启用 SRI 时，preload resource hints 会被禁用，因为 Chrome 的一个 bug 会导致文件被下载两次。
configureWebpack: Function,//如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
//如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
chainWebpack: Function,//是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
// 链式webpack配置
chainWebpack: config => {
// 因为是多页面，所以取消 chunks，每个页面只对应一个单独的 JS / CSS
config.optimization.splitChunks({
cacheGroups: {}
})
config.resolve.alias
// 定义 src 目录变量
.set(‘@‘, resolve(‘src‘))
// 定义 components 目录变量
.set(‘_c‘, resolve(‘src/components‘))
// 如有需要,指定外部某个文件不受eslint检测影响
config.module.rule(‘eslint‘).exclude.add(‘/src/utils‘).end()
},
configureWebpack: config => {
},
// 打包时不生成.map文件
productionSourceMap: false,
//css.loaderOptions:{},//Object,默认是{},向 CSS 相关的 loader 传递选项
css: {
//生产环境下是 true，开发环境下是 false,是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)
extract: process.env.NODE_ENV === ‘production‘,
// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
sourceMap: false,
loaderOptions: {
css: {},
less: {}
}
},
//支持的 loader 有：css-loader,postcss-loader,sass-loader,less-loader,stylus-loader
// 配置本地服务
devServer: {
// 端口号
port: 3000,
host: ‘localhost‘,
https: false,
// 配置自动启动浏览器
open: true,
hotOnly: false,
before: app => { },
// 跨域
proxy: {
‘/api‘: {
target: ‘http://localhost:8001/‘,
changeOrigin: true,
pathRewrite: { ‘^/api‘: ‘‘ }
}
}
},
// 多线程打包
parallel: require(‘os‘).cpus().length > 1,
// https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// 第三方插件配置
pluginOptions: {}
}