1.配置public下的index.html,通过htmlwebpackplugin动态注入脚本和样式
<!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,initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<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="app"></div>
<!-- built files will be auto injected -->
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
2.配置vue.config.js
// 生产环境
const IS_PROD = ["production", "prod"].includes(
process.env.NODE_ENV
);
// externals
const externals = {
vue: "Vue",
"vue-router": "VueRouter",
vuex: "Vuex",
vant: "vant",
axios: "axios"
};
// CDN外链，会插入到index.html中
const cdn = {
// 开发环境
dev: {
css: [],
js: []
},
// 生产环境
build: {
css: ["https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"],
js: [
"https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
"https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js",
"https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js",
"https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js",
"https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"
]
}
};
module.exports = {
configureWebpack: config => {
// 环境修改配置
if (IS_PROD) {
// externals
config.externals = externals;
}
},
chainWebpack: config => {
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
config.plugin("html").tap(args => {
if (IS_PROD) {
args[0].cdn = cdn.build;
} else {
args[0].cdn = cdn.dev;
}
return args;
});
},
devServer: {
proxy: {
// 代理地址
}
}
};
