Vue-Cli2到Vue-Cli3 Vue项目架构升级

前言

由于Vue-cli2老板官方不维护，且不推荐使用Vue-Cli2版本，推荐大家使用Vue-Cli3版本。然后我看了一下Vue-Cli3的文档，确实比之前的老版本体验好了很多。

1. 目录结构更清晰.
2. 弃用之前的的build文件夹的build.js和webpack.prod.conf.js
3. 使用新的vue.config.js配置文件包含了之前的wepack配置项。
4. 支持插件集成和插件开发。（比如PWA这样的功能可以通过插件一键集成）
5. 可以通过 vue ui 命令运行图形化界面，在图形化界面上创建和管理项目

准备工作

安装 Vue CLI

Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

用这个命令来检查其版本是否正确 (3.x)：

vue --version

创建Vue CLI3版本的新项目

创建项目可以用vue命令也可以用vue图形化界面
运行以下命令来创建一个新项目：

vue create hello-world

我下面介绍是使用图形界面创建项目：
执行以下名运行图形化界面

vue ui

执行完浏览器会自动打开一个http://localhost:8000/dashboard的网页。其实就是一个本node环境运行的一个项目。

在Vue项目管理器的界面可以查看项目列表，创建项目，导入已有的项目。

选择目录创建项目

取项目名字和选包管理器。

选择项目需要的配置或现在已经保存的预设配置

创建项目中，这个过程中会装好npm依赖库

当前项目配置，及依赖选装

迁移老项目的src目录组件到新项目

1. 直接把老项目的src目录复制到新项目，把新项目的src改一个名字例如src_bk 备份放这里以便过程中参考。
2. 把老项目的static目录复制到新项目的public目录。
3. 在新项目运行 npm run build, 这个时候肯定会报错，会提示你需要安装src里面用到的依赖，直接复制报错提示 需要运行的命 类似下图
4. 配置项目环境变量Vue Cli3环境变量参考官方文档 在项目根目录创建各个环境的.env配置。如下图
5. 再就是src目录下老老代码可能会有运行时编译的报错, 可以配置vue.conifg.js的runtimeCompiler配置为true,但是这样会让应用额外增加 10kb 。所以我是吧老项目有用到运行时编译的组件都改掉，让其打包时编译。

本地运行项目

npm run serve

如果有报错再根据错误提示修复问题。我这边目前没遇到什么大的问题。项目迁移完后一切正常。并且打包的文件比老项目架构大小少了大概30%。