1.看cdn连接是不是停止服务了
2.引入方式错误
正确的引入方式：
在vue.config.js里面
const cdn = {
js: [
// 'https://lib.baomitu.com/vue/2.6.10/vue.min.js',
// 'https://lib.baomitu.com/vuex/3.1.0/vuex.min.js',
// 'https://lib.baomitu.com/vue-router/3.0.6/vue-router.min.js',
// 'https://cdn.jsdelivr.net/npm/vue',
// 'https://cdn.jsdelivr.net/npm/ant-design-vue@1.6.5/dist/antd.min.js',
'https://lib.baomitu.com/moment.js/2.29.1/moment.min.js',
'https://lib.baomitu.com/moment.js/2.20.1/locale/zh-cn.js'
],
// css: ['https://cdn.jsdelivr.net/npm/ant-design-vue@1.6.5/dist/antd.min.css']
}
module.exports = {
chainWebpack(config) {
config.plugin('html').tap(opts => {
opts[0].cdn = cdn; return opts
})
},
}
可根据环境变量，仅在线上采取使用CDN,开发环境直接使用npm依赖包即可。
const IsProd= process.env.NODE_ENV === 'production';
chainWebpack(config) {
if (IsProd) {
config.plugin('html').tap(opts => {
opts[0].cdn = cdn;
return opts
})
}
}
webpack配置
configureWebpack: {
// 用cdn方式引入
externals:{
// 'vue': 'Vue',
// 'vuex': 'Vuex',
// 'vue-router': 'VueRouter',
// 'axios': 'axios',
// 'ant-design-vue': 'antd',
"moment": "moment",
},
}
在index.html里面
<!DOCTYPE html>
<htmllang="en">
<head>
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %><linkhref="<%= htmlWebpackPlugin.options.cdn.css[i] %>"rel="preload"as="style"><linkhref="<%= htmlWebpackPlugin.options.cdn.css[i] %>"rel="stylesheet"><% } %>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %><linkhref="<%= htmlWebpackPlugin.options.cdn.js[i] %>"rel="preload"as="script"><% } %>
</head>
<body>
<divid="app"></div>
<!-- built files will be auto injected -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %><scriptsrc="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script><% } %>
</body>
</html>
铭方营养健康管理系统
