vue.config.js 使用
let webpack = require("webpack");
//gzip 配置 start
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
//安装 gzip npm install --save-dev compression-webpack-plugin
//npm install --save-dev UglifyJsPlugin
//gzip 配置 end
module.exports = {
//publicPath: IS_PROD ? cdnDomian : '/',
lintOnSave: process.env.NODE_ENV !== "production",
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
outputDir: process.env.outputDir,
productionSourceMap: false, // process.env.NODE_ENV === "production",
// fileName:"{path}.gz{query}",
// productionGzip: true,
// productionGzipExtensions: ['js', 'css'],
assetsDir: "assets",
devServer: {
port: 5775,
//before(app) { }
// ,
// proxy: {
// '/plugins': { //这里最好有一个 /
// target: 'http://localhost:8800', // 后台接口域名
// ws: true, //如果要代理 websockets，配置这个参数
// secure: false, // 如果是https接口，需要配置这个参数
// changeOrigin: true,
// pathRewrite: {
// "^/plugins": "/"
// }
// }
// }
},
configureWebpack: () => ({
devtool: "source-map",
resolve: {
alias: {
// '~styles': path.resolve('./src/assets/styles')
}
},
plugins: [
new webpack.ProvidePlugin({}),
//gzip 配置 start
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// new UglifyJsPlugin({
// uglifyOptions: {
// compress: {
// drop_debugger: true,
// drop_console: true
// }
// },
// sourceMap: false,
// parallel: true
// }),
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 1024 * 0.5,
minRatio: 1
})
//gzip 配置 end
],
//引入第三方包
externals: {
// 'vue': 'Vue',
'element-ui': 'ELEMENT',
"axios": "axios",
"vant": "vant",
"$": "jquery"
}
}),
chainWebpack: config => {
//config.entry("index").add("babel-polyfill");
//if (process.env.NODE_ENV === "production") {
// #region 图片压缩
// #endregion
// #region 启用GZip压缩
// #endregion
//#region 忽略生成环境打包的文件
var externals = {
vue: "Vue"
// axios: "axios",
// "element-ui": "ELEMENT",
// "vue-router": "VueRouter",
// vuex: "Vuex"
};
config.externals(externals);
//}
let cdn = {
css: [],
js: []
};
// eslint-disable-next-line no-unused-vars
let root = process.env.VUE_APP_CDN;
cdn.version = new Date().getTime();
cdn.versionMy = {
"appBasis": "1.0.0",
"app": "1.0.0",
"appDataId": "1.0.0",
"appDataMock": "1.0.0",
"appNavsBasis": "1.0.0",
"appNavs": "1.0.0",
"appChartConfigBasis": "1.0.0",
"appChartConfig": "1.0.0",
"appAuthBasis": "1.0.0",
"appAuth": "1.0.0",
"bsPluginsWechatBasis": "1.0.0",
"bsPluginsWechat": "1.0.0",
"bsPluginsStyleBasis": "1.0.0",
"bsPluginsStyle": "1.0.0"
}
//处理开发时候变更问题
if (process.env.NODE_ENV !== "production") {
Object.keys(cdn.versionMy).forEach(item => {
cdn.versionMy[item] = cdn.version;
});
}
//let dev = process.env.NODE_ENV !== "production";
let dev = false;
if (dev) {
cdn.css.push(`https://unpkg.com/element-ui/lib/theme-chalk/index.css`);
cdn.css.push(`https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css`);
// cdn.css.push(`https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.7/dist/nutui.min.css`);
cdn.js.push(`https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js`);
} else {
cdn.css.push(`${root}/plugins/element-ui/2.13.2/lib/theme-chalk/index.css`);
cdn.css.push(`${root}/plugins/vant/2.8/lib/index.css`);
// cdn.css.push(`${root}/plugins/nutui/2.2.7/nutui.min.css`);
cdn.js.push(`${root}/plugins/jquery/3.4.1/jquery.min.js`);
}
// cdn.css.push(`${root}/plugins/animate/3.7.0/animate.min.css`);
// cdn.css.push(`${root}/plugins/leaflet/1.4.0/leaflet.css`);
// cdn.css.push(`${root}/plugins/jexcel/3.4.4/jexcel.css`);
cdn.js.push(`/config-open/load-script.js`);
cdn.js.push(`/config-open/load-open.js`);
cdn.js.push(`/config-open/brower-system-wx.js`);
cdn.js.push(`/config/app.data.id.js?v=${cdn.versionMy.appDataId}`);
cdn.js.push(`/config/app.data.mock.${process.env.NODE_ENV}.js?v=${cdn.versionMy.appDataMock}`);
let ownerId = process.env.VUE_APP_OWNERID;
cdn.js.push(`/config/app.${process.env.NODE_ENV}.js?v=${cdn.versionMy.appBasis}`);
cdn.js.push(`/config/app.navs.js?v=${cdn.versionMy.appNavsBasis}`);
cdn.js.push(`/config/app.auth.js?v=${cdn.versionMy.appAuthBasis}`);
cdn.js.push(`/config/app.chart.config.js?v=${cdn.versionMy.appChartConfigBasis}`);
cdn.js.push(`/config/${ownerId}/app.${process.env.NODE_ENV}.js?v=${cdn.versionMy.app}`);
cdn.js.push(`/config/${ownerId}/app.navs.js?v=${cdn.versionMy.appNavs}`);
cdn.js.push(`/config/${ownerId}/app.auth.js?v=${cdn.versionMy.appAuth}`);
cdn.js.push(`/config/${ownerId}/app.chart.config.js?v=${cdn.versionMy.appChartConfig}`);
cdn.js.push(`/bs-plugins-wechat/app.wechat.js?v=${cdn.versionMy.bsPluginsWechatBasis}`);
cdn.js.push(`/bs-plugins-wechat/${ownerId}/app.wechat.${process.env.NODE_ENV}.js?v=${cdn.versionMy.bsPluginsWechat}`);
cdn.css.push(`/bs-plugins-wechat/${ownerId}/app.wechat.css?v=${cdn.versionMy.bsPluginsWechat}`);
cdn.css.push(`/bs-plugins-style/extand.css?v=${cdn.versionMy.bsPluginsStyleBasis}`);
cdn.css.push(`/bs-plugins-style/${ownerId}/extand.css?v=${cdn.versionMy.bsPluginsStyle}`);
if (dev) {
cdn.js.push(`https://lib.baomitu.com/vue/2.6.11/vue.min.js`);
cdn.js.push(`https://unpkg.com/element-ui@2.13.2/lib/index.js`);
cdn.js.push(`https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js`);
// cdn.js.push(`https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.7/dist/nutui.min.js`);
cdn.js.push(`https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js`);
cdn.js.push(`https://cdn.bootcss.com/vuex/3.2.0/vuex.min.js`);
cdn.js.push(`https://cdn.bootcss.com/axios/0.19.2/axios.min.js`);
cdn.js.push(`https://cdn.bootcss.com/dayjs/1.8.27/dayjs.min.js`);
//cdn.js.push(`//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js`);
} else {
cdn.js.push(`${root}/plugins/vue/2.6.11/vue.min.js`);
cdn.js.push(`${root}/plugins/element-ui/2.13.2/lib/index.js`);
cdn.js.push(`${root}/plugins/vant/2.8/lib/vant.min.js`);
//cdn.js.push(`${root}/plugins/nutui/2.2.7/nutui.min.js`);
cdn.js.push(`${root}/plugins/vue-router/3.2.0/vue-router.min.js`);
cdn.js.push(`${root}/plugins/vuex/3.4.0/vuex.min.js`);
cdn.js.push(`${root}/plugins/axios/0.19.2/axios.min.js`);
cdn.js.push(`${root}/plugins/dayjs/1.8.27/dayjs.min.js`);
//cdn.js.push(`//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js`);
}
// cdn.js.push(`${root}/plugins/echarts/4.8.0/echarts.min.js`);
// cdn.js.push(`${root}/plugins/vue-i18n/8.18.1/vue-i18n.js`);
config.plugin("html").tap(args => {
args[0].cdn = cdn;
args[0].env = process.env.NODE_ENV;
args[0].baiduAK = process.env.VUE_APP_BaiDu_AK;
return args;
});
// #endregion
// #region 分析打包体积
// #endregion 分析打包体积
}
};
首页调用 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%=css%>" rel="preload" as="style">
<link rel="stylesheet" href="<%=css%>" as="style">
<% } %>
</head>
<body style="min-width:317px;">
<!-- 锚点id，控制页面跳转后，滚动条放在顶部 -->
<div id="gloalMdId" style="display: none;" ></div>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="appMain" ></div>
<!-- 引入组件库 -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%=js%>" rel="preload" as="script">
<script src="<%=js%>"></script>
<% } %>
<script type="text/javascript">
window.$appConfig.baiduAk = "<%=htmlWebpackPlugin.options.baiduAK%>";
if(window.$appNavs.currentRoot){
window.$appConfig.currentRoot=window.$appNavs.currentRoot;
}
if(window.$appNavs.currentRootHttp){
window.$appConfig.currentRootHttp=window.$appNavs.currentRootHttp;
}
// Vue.use(Element, { locale });
</script>
</body>
</html>
版权声明：本文为fzsdchenbigui原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。