案例项目目录:
const fs = require("fs"); //操作本地文件,多用于构建多项目,按需引入
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin"); //copy静态文件,按需引入
const CompressionPlugin = require('compression-webpack-plugin'); // 开启gzip压缩, 按需引入
const productionGzipExtensions = /\\.(js|css|json|txt|html|ico|svg)(\\?.\*)?$/i; // 开启gzip压缩, 按需写入
let pagesMap = {};
// let NODE = process.env.NODE_ENV;
let SITE = process.env.VUE_APP_SITE || "production";
const resolve = dir => {
return path.join(__dirname, dir);
};
if (SITE === "htmls") {
multipageFn();
} else if (SITE === "web") {
singlepageFn();
} else if (SITE === "manager") {
singlepageFn("manager");
}
/**
* 多页面项目(例子1)
* entry:"",template:"",filename:"" 等;
* */
function multipageFn() {
let filesList = resolve(`./src/views/${SITE}`);
if (fs.existsSync(filesList)) {
let files = fs.readdirSync(filesList);
files.forEach(name => {
pagesMap[name] = {
entry: `./src/views/${SITE}/${name}/main.js`, //入口文件,路径根据实际情况而定
template: `./src/views/${SITE}/${name}/index.html`,
filename: `${name}.html`,
title: process.env.VUE_APP_TITLE||SITE //页面title
};
});
}
}
/**
* 单页页面项目(例子2)
* */
function singlepageFn(path='index') {
pagesMap = {
index: {
entry: `./src/views/${SITE}/main.js`,//入口文件,路径根据实际情况而定
template: `./public/${path}.html`,
filename: `index.html`,
title: process.env.VUE_APP_TITLE||SITE //页面title
}
};
}
module.exports = {
// 配置 webpack-dev-server 行为。
devServer: {
open: false, //告诉dev-server在服务器启动后打开浏览器 boolean = false string object
port: 8080, //指定端口号
host: "0.0.0.0", //指定要使用的主机
https: false, //默认情况下,将通过HTTP为dev-server提供服务
hotOnly: false, //启用热模块替换
proxy: { //还可配置多个跨域
// 代理跨域
"/api": {
target: "XXXXXXX", //代理的接口地址
changeOrigin: true,
secure: false,
pathRewrite: {
"^/api": ""
}
}
}
},
assetsDir: "static",//存放打包后的文件夹
publicPath: "/", //string = '/'默认捆绑的文件将在此路径下的浏览器中可用(老版本 baseUrl: "",)
outputDir: `dist/${SITE}`, // 输出文件目录
lintOnSave: false, // eslint-loader 是否在保存的时候检查
filenameHashing: true, // 默认在生成的静态资源文件名中包含hash以控制缓存
productionSourceMap: false, //是否生成对应map文件(未被压缩加密的代码),设置为 false 以加速生产环境构建
// 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象
configureWebpack: {
//cdn引入时需配置
externals:{
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
"element-ui": "Element"
},
plugins: [
new CopyWebpackPlugin({ //打包时执行拷贝
patterns:[{
from: "./static",//要copy的静态文件资源
to: 'static'
}]
}),
//压缩
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
})
]
},
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: ( ) => {
// 对内部的 webpack 配置(比如修改、增加Loader选项)(链式操作)
},
css: {
// css的处理
// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS
// 默认生产环境下是 true,开发环境下是 false
extract: true,
sourceMap: false, //是有开启css source map(为 true 之后可能会影响构建的性能)
loaderOptions: {
//向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
css: {},
less: {},
postcss: {
plugins: SITE!=="manager"?[
require('postcss-px2rem-exclude')({ // 把px单位换算成rem单位
rootValue: 75, // 换算的基数(设计图750的根字体为75)
// selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
propList: ["*"]
})
]:[]
}
}
},
//pages: { // 构建多页面应用,页面的配置
// index: {
// entry: "./src/index/main.js", //入口文件
// template: "./src/index/index.hrml", //模板文件
// filename: "index.html", //输出的文件名称
// // 当使用 title 选项时,template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
// title: 'Index Page'
// }
//},
pages: pagesMap,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// 第三方插件配置
pluginOptions: {
// ...
}
}
以上是自己平常项目中常用的配置,如有需要改进的地方还请大神们指点;
参考vue.config.js配置