详解项目升级到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 相关文章推荐
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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
php桌面中心(二) 数据库写入
2007/03/11 PHP
php中Smarty模板初体验
2011/08/08 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php自定义session示例分享
2014/04/22 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
一个基于jquery的文本框记数器
2012/09/19 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python 连连看连接算法
2008/11/22 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
python实现远程控制电脑
2019/05/23 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python 6种方法实现单例模式
2020/12/15 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
详解redis在微服务领域的贡献
2021/10/16 Redis