vue.config.js 使用
let webpack = require("webpack");
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
module.exports = {
lintOnSave: process.env.NODE_ENV !== "production",
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
outputDir: process.env.outputDir,
productionSourceMap: false,
assetsDir: "assets",
devServer: {
port: 5775,
},
configureWebpack: () => ({
devtool: "source-map",
resolve: {
alias: {
}
},
plugins: [
new webpack.ProvidePlugin({}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 1024 * 0.5,
minRatio: 1
})
],
externals: {
'element-ui': 'ELEMENT',
"axios": "axios",
"vant": "vant",
"$": "jquery"
}
}),
chainWebpack: config => {
var externals = {
vue: "Vue"
};
config.externals(externals);
let cdn = {
css: [],
js: []
};
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 = 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.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.js.push(`${root}/plugins/jquery/3.4.1/jquery.min.js`);
}
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.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`);
} 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/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`);
}
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;
});
}
};
首页调用 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;
}
</script>
</body>
</html>