详解项目升级到vue-cli3的正确姿势


Posted in Javascript onJanuary 28, 2019

一. 原以为升级vue-cli3的路线是这样的:

创建vue-cli3项目,按原有项目的配置选好各项配置

详解项目升级到vue-cli3的正确姿势

迁移目录

src->src
static->public

对比新旧 package.json ,然后 yarn install ,完毕。

详解项目升级到vue-cli3的正确姿势

然鹅... 运行项目,报错 You are using the runtime-only build of Vue......详解项目升级到vue-cli3的正确姿势详解项目升级到vue-cli3的正确姿势

然后去查了下旧项目的相关字眼文件:

详解项目升级到vue-cli3的正确姿势

噢,原来是vue-cli3的webpack相关文件都得自己写。于是乎根据官网的指引,在根目录创建了 vue.config.js

此时粗略配置:

chainWebpack: config => {
 config.module
  .rule('vue')
  .use('vue-loader')
  .loader('vue-loader')
  .tap(options => {
  options.compilerOptions.preserveWhitespace = false
  return options
  })
 config.resolve.alias
  .set('vue$', 'vue/dist/vue.esm.js')
  .set('@', resolve('src'))
 }

二. 此时勉强能跑起来,但后续遇到了这些坑:

#1 public 静态资源不加载

```
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 // ....
 // 确保静态资源
 config.resolve.extensions = ['.js', '.vue', '.json', '.css']
 config.plugins.push(
 new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
)
```

#2 Chrome 查看样式时无法找到源文件

详解项目升级到vue-cli3的正确姿势

原因: vue-cli3 里默认关闭 sourceMap,样式都会被打包到首页。 解决: 需要自己配置打开

// 让样式找到源
 css: {
 sourceMap: true
 },

#3 生产环境的 debugerconsole 无法通过 uglifyjs-webpack-pluginuglify-es 剔除

原因:不支持 es6 , 需要配置 babel ( uglify-es 按配置填会显示不存在选项)

解决:插件terser

```
const TerserPlugin = require('terser-webpack-plugin')
if (process.env.NODE_ENV === 'production') {
 // 为生产环境修改配置...
 new TerserPlugin({
 cache: true,
 parallel: true,
 sourceMap: true, // Must be set to true if using source-maps in production
 terserOptions: {
  compress: {
  drop_console: true,
  drop_debugger: true
  }
 }
 })
} else {
 // 为开发环境修改配置...
}
```

#4 无法在 config 目录下配置不同环境的 API_URL ,用于跨域请求

原因: vue-cli3 中需要遵循变量规则,使用 VUE_APP 前缀

官方规则: 在客户端侧代码中使用环境变量

解决:于是你需要创建如下几个文件:

详解项目升级到vue-cli3的正确姿势

.local 也可以加在指定模式的环境文件上,比如 .env.development.local 将会在 development 模式下被载入,且被 git 忽略。

文件内容:

// env.development.local
NODE_ENV = development
VUE_APP_URL = http://xxx.x.xxx/

#5 vue-cli代理转发控制台反复打印 "WebSocket connection to'ws://localhost..."

详解项目升级到vue-cli3的正确姿势

解决方法:

vue.config.js 中配置 devServer.proxywsfalse

结合上述两步,相对应的 vue.config.js ,需要这么写:

const env = process.env.NODE_ENV
let target = process.env.VUE_APP_URL

const devProxy = ['/api', '/'] // 代理
// 生成代理配置对象
let proxyObj = {};
devProxy.forEach((value, index) => {
 proxyObj[value] = {
 ws: false,
 target: target,
 // 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
 changeOrigin: true,
 pathRewrite: {
  [`^${value}`]: value
 }
 };
})
// ....
devServer: {
 open: true,
 host: 'localhost',
 port: 8080,
 proxy: proxyObj
 }

最后贴上我的 vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

const path = require('path')
const env = process.env.NODE_ENV
let target = process.env.VUE_APP_URL

const devProxy = ['/api', '/'] // 代理

// 生成代理配置对象
let proxyObj = {};
devProxy.forEach((value, index) => {
 proxyObj[value] = {
 ws: false,
 target: target,
 // 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
 changeOrigin: true,
 pathRewrite: {
  [`^${value}`]: value
 }
 };
})

function resolve (dir) {
 return path.join(__dirname, dir)
}

module.exports = {
 publicPath: '/',
 // 让样式找到源
 css: {
 sourceMap: true
 },
 configureWebpack: config => {
 // 确保静态资源
 config.resolve.extensions = ['.js', '.vue', '.json', '.css']
 config.plugins.push(
  new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
 )
 if (process.env.NODE_ENV === 'production') {
  // 为生产环境修改配置...
  new TerserPlugin({
  cache: true,
  parallel: true,
  sourceMap: true, // Must be set to true if using source-maps in production
  terserOptions: {
   compress: {
   drop_console: true,
   drop_debugger: true
   }
  }
  })
 } else {
  // 为开发环境修改配置...
 }

 },
 chainWebpack: config => {
 config.module
  .rule('vue')
  .use('vue-loader')
  .loader('vue-loader')
  .tap(options => {
  options.compilerOptions.preserveWhitespace = false
  return options
  })
 config.resolve.alias
  .set('vue$', 'vue/dist/vue.esm.js')
  .set('@', resolve('src'))
 },
 devServer: {
 open: true,
 host: 'localhost',
 port: 8080,
 proxy: proxyObj
 }
}

三. Eslint相关报错及配置

详解项目升级到vue-cli3的正确姿势

module.exports = {
 root: true,
 env: {
 node: true
 },
 'extends': [
 'plugin:vue/essential',
 '@vue/standard'
 ],
 rules: {
 'generator-star-spacing': 'off',
 'object-curly-spacing': 'off',
 // 最常出现的错误
 'no-unused-vars': 'off',
 // 最常出现的错误
 "vue/no-use-v-if-with-v-for": ["error", {
  "allowUsingIterationVar": true
 }],
 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
 },
 parserOptions: {
 parser: 'babel-eslint'
 }
}

最后的最后,跑个项目

yarn serve

详解项目升级到vue-cli3的正确姿势

yarn build

详解项目升级到vue-cli3的正确姿势

详解项目升级到vue-cli3的正确姿势

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 #jQuery
this在vue和小程序中的使用详解
Jan 28 #Javascript
Vue加载json文件的方法简单示例
Jan 28 #Javascript
Vue项目安装插件并保存
Jan 28 #Javascript
vue 左滑删除功能的示例代码
Jan 28 #Javascript
详解Next.js页面渲染的优化方案
Jan 27 #Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 #Javascript
You might like
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
在Django的上下文中设置变量的方法
2015/07/20 Python
Python验证企业工商注册码
2015/10/25 Python
Python的装饰器使用详解
2017/06/26 Python
Python中django学习心得
2017/12/06 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python 带时区的日期格式化操作
2020/10/23 Python
经济管理专业毕业生推荐信
2013/11/11 职场文书
人事部经理岗位职责
2014/03/07 职场文书
社区党务公开实施方案
2014/03/18 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android