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: {
// 代理地址
}
}
};
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通