详解项目升级到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 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
微信小程序滑动选择器的实现代码
Aug 10 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
JavaScript 反射学习技巧
Oct 16 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写出自己的BLOG系统 2
2010/04/12 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
使用javascript为网页增加夜间模式
2014/01/26 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
Python中shapefile转换geojson的示例
2019/01/03 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
接待员岗位责任制
2014/02/10 职场文书
交通事故被告代理词
2015/05/23 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
python中如何对多变量连续赋值
2021/06/03 Python
React如何创建组件
2021/06/27 Javascript
MySQL基于索引的压力测试的实现
2021/11/07 MySQL