微客导航 » 文章资讯 » vue-cli3.0如何使用CDN区分开发、生产、预发布环境

vue-cli3.0如何使用CDN区分开发、生产、预发布环境

2023-09-05 12:03:04 171

前言：上一篇记录文vue-cli3.0build包太大导致首屏过长的解决方案中提到了CDN优化，之前是直接在html中手动注入JS，也没有对开发和生产模式进行区分，因为是使用收费的CDN，所以在开发模式会遇到无权使用CDN的问题。要是使用CDN写死在html中，不同环境需要手动的切换CDN，那么早晚有一天会搞乱，下面就说说怎么在vue-cli3.0中根据不同环境动态注入CDN。

1.修改public/index.html

通过htmlwebpackplugin动态注入脚本和样式，index.html如下：







favicon.ico"rel="externalnofollow">
杭州纳舍科技

<%for(variinhtmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css){%>
"rel="externalnofollow"rel="externalnofollow"rel="preload"as="style">
"rel="externalnofollow"rel="externalnofollow"rel="stylesheet">
<%}%>

<%for(variinhtmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js){%>
"rel="externalnofollow"rel="preload"as="script">
<%}%>

<%for(variinhtmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js){%> "> <%}%>

2.修改vue.config.js配置

首先我们会考虑哪些东西要进行CDN优化，例如我们需要把vue、vue-router、moment在构建的时候排除在外使用CDN加载这三个库，那么需要把添加externals

constisProduction=process.env.NODE_ENV==='production';
module.exports={
configureWebpack:config=>{
if(isProduction){
config.externals={
'vue':'Vue',
'vue-router':'VueRouter',
'moment':'moment'
}
}
}
}

现在我们运行npmrunbuild打包出来的文件就没有Vue、VueRouter、moment，现在我们使用html-webpack-plugin插件进行动态注入CDN，在vue-cli3.0中我们要这样配置：

constisProduction=process.env.NODE_ENV==='production';
constcdn={
css:['xxx.css','sss.js'],
js:['xxxx.js','sss.js']
}
module.exports={
configureWebpack:config=>{
if(isProduction){
config.externals={
'vue':'Vue',
'vue-router':'VueRouter',
'moment':'moment'
}
}
}
chainWebpack:config=>{
if(isProduction){
config.plugin('html')
.tap(args=>{
args[0].cdn=cdn;
returnargs;
})
}
}
}

到目前为止已经解决了开发模式不使用CDN，生产模式使用CDN的问题和动态在html中注入CDN的问题。

可能你会遇到和我一样的问题

预发布build测试，但无权使用生产上的CDN问题，那么我们必须再添加一个环境变量来区分预发布build的模式。（vue-cli3.0环境变量文档）这里我添加一个IS_LOCAL_BUILD，首先我们在vue.cofnig.js同路径下创建一个.en.production.local:

//.en.production.local`内容：
IS_LOCAL_BUILD='isLocalBuild'

修改vue.config.js如下：

constisProduction=process.env.NODE_ENV==='production';
constisLocalBuild=process.env.IS_LOCAL_BUILD==='isLocalBuild';
constJS_CDN=isLocalBuild?[
预发布CDN(例如那些免费的CDN)
]:[
生产环CDN
];
constCSS_CDN=isLocalBuild?[预发布CDN]:[生产CDN]
constcdn={
css:CSS_CDN,
js:JS_CDN
}
module.exports={
configureWebpack:config=>{
if(isProduction){
config.externals={
'vue':'Vue',
'vue-router':'VueRouter',
'moment':'moment'
}
}
}
chainWebpack:config=>{
if(isProduction){
config.plugin('html')
.tap(args=>{
args[0].cdn=cdn;
returnargs;
})
}
}
}

ok，上面区分了生产、预发布和开发环境使用CDN的问题，这样就不用根据不同环境手动去修改CDN了。不过又一点要注意：⚠️预发布版本的构建才需要添加.en.production.local。

完整的vue.config.js（供参考）

constpath=require('path');
constCompressionWebpackPlugin=require('compression-webpack-plugin');
constUglifyJsPlugin=require('uglifyjs-webpack-plugin');
constproductionGzipExtensions=['js','css'];
constisProduction=process.env.NODE_ENV==='production';

functionresolve(dir){
returnpath.join(__dirname,dir);
}

//预发布环境
constisLocalBuild=process.env.IS_LOCAL_BUILD==='isLocalBuild';
console.log('前端文件预发布打包-isLocalBuild:',isLocalBuild);

//非externalsCND前缀设置
constCDN_URL=isLocalBuild?'/':'//s.zypj.nasetech.com/';

//区分生产环境打包和预发布打包，使用不同的CDN
constJS_CDN=isLocalBuild?[
//预发布CDN
]:[
//生产CDN
];

constcdn={
//css:[],
js:JS_CDN
}

module.exports={
lintOnSave:true,
baseUrl:isProduction?CDN_URL:'/',
chainWebpack:(config)=>{
//build打包才使用CDN
if(isProduction){
config.plugin('html')
.tap(args=>{
args[0].cdn=cdn;
returnargs;
})
}

config.resolve.alias
.set('assets',resolve('src/assets'))
.set('pages',resolve('src/pages'))
.set('components',resolve('src/components'))
.set('utils',resolve('src/utils'))
},
devServer:{
host:'0.0.0.0',
port:8080,
https:false,
hotOnly:false,
disableHostCheck:false,
proxy:{
'/api/v0/':{
//目标API地址
target:'http://127.0.0.1:4545',
//将主机标头的原点更改为目标URL
changeOrigin:true,
},
},
},
configureWebpack:config=>{
//生产模式
if(isProduction){
config.externals={
'vue':'Vue',
'vue-router':'VueRouter',
'moment':'moment'
}
//打包生产.gz包
config.plugins.push(newCompressionWebpackPlugin({
algorithm:'gzip',
test:newRegExp('\\.('+productionGzipExtensions.join('|')+')$'),
threshold:10240,
minRatio:0.8
}))
//添加自定义代码压缩配置
config.plugins.push(
newUglifyJsPlugin({
uglifyOptions:{
compress:{
warnings:false,
drop_debugger:true,
drop_console:true,
},
},
sourceMap:false,
parallel:true,
})
)
}
}
}

*使用CDN一些有意思的坑：

使用CDN还会遇到一些有意思的事，例如使用beta版的vue导致elementUI库有些组件无法正常工作;使用免费的CDN上线没有多久就GG不能用等悲惨故事！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue-cli3.0如何使用CDN区分开发、生产、预发布环境

热门推荐

随机推荐