详解项目升级到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实现一个简单的弹出窗
Feb 22 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
React简单介绍
May 24 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
vue中activated的用法
Jan 03 Vue.js
用JS写一个发布订阅模式
Nov 07 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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP之短标签开启设置
2013/06/17 PHP
thinkPHP查询方式小结
2016/01/09 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python计算文本文件行数的方法
2015/07/06 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
详解python的变量缓存机制
2021/01/24 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
学习十八大精神心得体会
2013/12/31 职场文书
计生工作先进事迹
2014/08/15 职场文书
出纳岗位职责范本
2015/03/31 职场文书
大学军训心得体会800字
2016/01/11 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang