vue-cli常用设置总结
前端之家收集整理的这篇文章主要介绍了
vue-cli常用设置总结，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_5020@基于vue-cli做了好几个项目了，想把一些自己的常用设置写出来，磨了好久，一看vue-cli3.0都快出来了，不能再磨了。。
@H
5020@路径相关
@H502_0@
css内引用的资源
<div class="jb51code">
<pre class="brush:js;">
build -> utils.js
// generate loader string to be used with extract text plugin
function generateLoaders (loader,loaderOptions) {
//less
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,publicPath: '../../',//注意: 此处根据路径,
自动更改
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
@H_
502_0@
本地访问
index.js
module.exports = {
build: {
//less
//assetsPublicPath: '/',assetsPublicPath: './',//less
},//less
}
@H_
502_0@
调试相关
@H_
502_0@
内网访问
index.js
module.exports = {
//less
dev: {
//less
port: process.env.PORT || 8080,//可改端口
host:'192.168.0.105',//不是8080端口可能需要指定host为本机IP
}
}
@H_
502_0@
跨域代理
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);
}
});
@H_
502_0@
路由加载切换
@H_
502_0@异步加载可以加快首屏加载速度，但是在开发阶段会导致热加载变慢，所以根据NODE_ENV来判断，开发环境不使用异步
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
}
},]
@H_
502_0@
打包
@H_
502_0@
dll打包
@H_
502_0@1、在build目录新建webpack.dll.conf.js
文件
输出的位置
filename: '[name].dll.js',library: '[name]_library'
// vendor.dll.js中暴露出的
全局变量名。
},plugins: [
new webpack.
DllPlugin({
path: path.join(__dirname,'..','[name]-manifest.json'),name: '[name]_library',context: __dirname
}),// 压缩打包的
文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
@H_
502_0@2、在build目录下的webpack.prod.conf.js
添加新
插件
@H_
502_0@3、在项目根目录下的index.html内
添加dll.js引用
<
Meta charset="utf-8">
title
<
Meta name="viewport" content="width=device-width,initial-scale=1.0">
