vue-cli常用设置总结

2023-09-16 03:51:05 66

基于vue-cli做了好几个项目了，想把一些自己的常用设置写出来，磨了好久，一看vue-cli3.0都快出来了，不能再磨了。。

路径相关

css内引用的资源

build->utils.js
//generateloaderstringtobeusedwithextracttextplugin
functiongenerateLoaders(loader,loaderOptions){
//less
//ExtractCSSwhenthatoptionisspecified
//(whichisthecaseduringproductionbuild)
if(options.extract){
returnExtractTextPlugin.extract({
use:loaders,
publicPath:'../../',//注意:此处根据路径,自动更改
fallback:'vue-style-loader'
})
}else{
return['vue-style-loader'].concat(loaders)
}
}

本地访问

config->index.js
module.exports={
build:{
//less
//assetsPublicPath:'/',
assetsPublicPath:'./',
//less
},
//less
}

调试相关

内网访问

config->index.js

module.exports={
//less
dev:{
//less
port:process.env.PORT||8080,//可改端口
host:'192.168.0.105',//不是8080端口可能需要指定host为本机IP
}
}

跨域代理

config->index.js
module.exports={
//less
dev:{
//less
proxyTable:{
'/AppHome':{
target:'http://192.168.0.211:2334',//接口域名
changeOrigin:true,//是否跨域
pathRewrite:{
'^/AppHome':'/AppHome'//需要rewrite重写
}
}
},
}
}
config->dev.env.js
module.exports=merge(prodEnv,{
NODE_ENV:'"development"',
API_HOST:'"AppHome/"'
})
config->prod.env.js
module.exports={
NODE_ENV:'"production"',
API_HOST:'"http://xxx.xxx.com/AppHome/"'//生产环境改为绝对地址，免得路径错了
}
//调用
this.$http
.post(process.env.API_HOST+"GetApproveTypeList",{ID:0})
.then(data=>{
let$data=data.data;
if($data.IsSuccess){
this.list.push(...$data.Model);
}
});

路由加载切换

异步加载可以加快首屏加载速度，但是在开发阶段会导致热加载变慢，所以根据NODE_ENV来判断，开发环境不使用异步

let_import
if(process.env.NODE_ENV==='development'){
_import=file=>require('@/components/'+file+'.vue').default
}
if(process.env.NODE_ENV==='production'){
_import=file=>()=>import('@/components/'+file+'.vue')
}

routes:[
{
path:'/',
name:'Index',
component:_import('Approve/Index'),
meta:{
level:1
}
},
]

打包

dll打包

1、在build目录新建webpack.dll.conf.js

varpath=require("path");
varwebpack=require("webpack");
module.exports={
//你想要打包的模块的数组
entry:{
vendor:['vue/dist/vue.esm.js',//有些资源需要直接指定js，否则会重复打包
'vuex',
'axios',
'vue-router'
]
},
output:{
path:path.join(__dirname,'../static/js'),//打包后文件输出的位置
filename:'[name].dll.js',
library:'[name]_library'
//vendor.dll.js中暴露出的全局变量名。
},
plugins:[
newwebpack.DllPlugin({
path:path.join(__dirname,'..','[name]-manifest.json'),
name:'[name]_library',
context:__dirname
}),
//压缩打包的文件
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
})
]
};

2、在build目录下的webpack.prod.conf.js添加新插件

constwebpackConfig=merge(baseWebpackConfig,{
//less
plugins:[
//less
newwebpack.DllReferencePlugin({
context:__dirname,
manifest:require('../vendor-manifest.json')
})
]
})

3、在项目根目录下的index.html内添加dll.js引用





title

4、在项目根目录下的package.json内添加dll命令(顺便给build命令添加report)，运行一次生成dll.js

"scripts":{
"dev":"nodebuild/dev-server.js",
"start":"npmrundev",
"build":"nodebuild/build.js--report",
"dll":"webpack--configbuild//webpack.dll.conf.js"
}

关闭SourceMap

config->index.js
module.exports={
//less
build:{
//less
productionSourceMap:false,
},
}

总结

以上所述是小编给大家介绍的vue-cli常用设置总结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

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

vue-cli常用设置总结

热门推荐

随机推荐