vue-cli常用设置总结


Posted in Javascript onFebruary 24, 2018

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

路径相关

css内引用的资源

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)
  }
 }

本地访问

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

var path = require("path");
var webpack = 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: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '..', '[name]-manifest.json'),
      name: '[name]_library',
      context: __dirname
    }),
    // 压缩打包的文件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="./static/js/vendor.dll.js"></script>
 </body>
</html>

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

"scripts": {
  "dev": "node build/dev-server.js",
  "start": "npm run dev",
  "build": "node build/build.js --report",
  "dll": "webpack --config build//webpack.dll.conf.js"
 }

关闭SourceMap

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

总结

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

Javascript 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
js脚本实现数据去重
Nov 27 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
JS处理一些简单计算题
Feb 24 #Javascript
jQuery 改变P标签文本值方法
Feb 24 #jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 #jQuery
通过js动态创建标签,并设置属性方法
Feb 24 #Javascript
JS随机数产生代码分享
Feb 24 #Javascript
JS中常用的消息框总结
Feb 24 #Javascript
JS改变页面颜色源码分享
Feb 24 #Javascript
You might like
php删除左端与右端空格的方法
2014/11/29 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
php实现Mysql简易操作类
2015/10/11 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
PyQt5每天必学之工具提示功能
2018/04/19 Python
python生成器推导式用法简单示例
2019/10/08 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python可迭代对象去重实例
2020/05/15 Python
Python爬虫与反爬虫大战
2020/07/30 Python
python多线程和多进程关系详解
2020/12/14 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
亿企通软件测试面试题
2012/04/10 面试题
如何客观的进行自我评价
2013/12/17 职场文书
法学函授自我鉴定
2014/02/06 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
优秀班组事迹材料
2014/12/24 职场文书
表扬稿范文
2015/01/17 职场文书
迟到检讨书
2015/01/26 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers