详解项目升级到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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
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中将网页导出为Word文档的代码
2012/05/25 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
Python内置数据类型详解
2014/08/18 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
python实现逻辑回归的示例
2020/10/09 Python
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
附答案的Java面试题
2012/11/19 面试题
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
作为网站管理者应当如何防范XSS
2014/08/16 面试题
《夹竹桃》教学反思
2014/04/20 职场文书
初中毕业生自我评价
2015/03/02 职场文书
学会感恩主题班会
2015/08/12 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS