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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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开发中常用的8个小技巧
2008/08/27 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
在vue项目中引用Iview的方法
2018/09/14 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
关于读书的活动方案
2014/08/14 职场文书
灵山大佛导游词
2015/02/04 职场文书
文艺晚会开场白
2015/05/29 职场文书