3项目里面全局用less变量 cli vue_项目升级vue cli3 迁移日志

升级背景

公司项目是用 vue-cli 搭建的，至今已经有2年了热更新也越来越慢，正好 vue cli3 也出来，听说编译速度大大提升，就想把项目移植到 vue cli3

现状

技术： "webpack": "^3.6.0", "vue": "^2.5.2"

1. 代码量越来越大，编译速度也越来越慢，打包时间快一分钟，热更新也越来越慢，影响开发效率

2. 没有引入 eslint 语法检查, 代码风格不一

3. webpack 配置繁琐

4. 越来越多的UI库支持vue cli3

升级目的

1. 提升编译速度
2. 在vue cli3 创建项目时，引入 eslint，统一代码风格，方便代码 review（新手前端不想单独引入）
3. 所有配置vue cli3 已经做了处理，额外配置在vue.config.js中处理即可
4. 适应技术发展的潮流

项目升级

vue cl3 创建项目

vue create hello-world

详细步骤参考vue cli3文档

我用的配置是vue-router, vuex, less, babel, eslint

文件迁移

src 目录

简单粗暴把src移植过来

复制src/pages，src/App.vue, src/index.html

复制src/main.js

报错:

控制台报错
main.js:121 Uncaught SyntaxError: Unexpected token !
    at Object../src/main.js (app.js:2481)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at Object.1 (app.js:2555)
    at __webpack_require__ (app.js:770)
    at app.js:908
    at app.js:911

命令行报错
* cube-ui in ./src/main.js
* cube-ui/lib/picker/index.js in ./src/main.js
* cube-ui/lib/picker/picker.min.css in ./src/main.js
* cube-ui/lib/picker/picker.min.js in ./src/main.js
* cube-ui/lib/picker/style.css in ./src/main.js
* mint-ui in ./src/main.js
* mint-ui/lib/style.css in ./src/main.js
* vconsole in ./src/main.js
* vue-lazyload in ./src/main.js
* vue-resource in ./src/main.js