{转载删减版}{使用vue-cli4.0搭建项目及项目迁移方法}

前言

本篇文章就是主要记录迁移的过程和 vue-cli4.0 的搭建过程
版权声明：本文为CSDN博主「不想写代码的码农」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liyunkun888/article/details/102738377

附件

本文无需其他附件，如需附件后续将会在此处补充¹

一、升级本地环境

因为 vue-cli4.0 对 nodeJs版本有要求，所以我们先去nodeJs官网下载 一个稳定的新版本覆盖本地版本

如果之前本地全局安装了 vue-cli 的环境，那么需要全局卸载再安装 vue-cli4.0

npm uninstall -g vue-cli
 
npm install -g @vue/cli

安装好了之后输入 vue -V 查看版本

开始搞 vue-cli4.0 吧！

二、搭建项目

vue-cli3.0 以后项目创建的命令变成了下面这样

vue create <Project Name> //文件名 不支持驼峰（不能带有大写字母）

default 是使用默认配置
Manually select features 是自定义配置

我的自定义配置如下

具体配置如下

• 选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，建议选择 N，否则服务器还要进行配置

• css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

• 选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多

• 然后选择什么时候进行代码校验，Lint on save 保存就检查，Lint and fix on commit fix 或者 commit 的时候检查，建议第一个

• 下面就是如何存放配置了，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中。本着项目结构简单的想法，我选择了第二个

• 最后就是是否保存本次的配置了，N 不记录，如果选择 Y 需要输入保存名字

然后就等待创建项目吧

出现如图所示的提示，就说明搭建成功了

cd到项目目录，再输入 npm run serve 就跑项目了

三、环境配置

下面就是关于项目的环境配置了，我这边一般喜欢用 test、preview、production分别表示测试，预览，生产三种环境

修改 package.json 文件如下

"scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode test",           //测试
    "preview": "vue-cli-service build --mode preview",     //预览
    "build": "vue-cli-service build --mode production",    //生产
    "lint": "vue-cli-service lint"
},

在项目根目录下新建 .env.test、.env.preview、 .env.production 文件，分别对应三个环境的配置文件，注意，名字要与 --mode 后面的名字分别对应

.env.test 代码如下

NODE_ENV="test"
VUE_APP_BASE_URL="测试环境域名"

.env.pre 代码如下

NODE_ENV="preview"
VUE_APP_BASE_URL="预览环境域名"

.env.prod 代码如下

NODE_ENV="production"
VUE_APP_BASE_URL="生产环境域名"

这样环境就配置好了，分别用以下命令来打包不同环境的包就可以了

npm run test    //测试
npm run pre     //预发布
npm run prod    //生产

另外需要说明一点的是，本地环境会默认从 .env.development 文件中读取配置，所以记得有需要记得新建一个然后存放配置

我的 .env.development 代码如下

NODE_ENV="development"
VUE_APP_BASE_URL="本地环境域名"

四、项目配置

从 vue-cli3.0 开始 build 和 config 目录就取消了，如果需要修改配置，可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置，因为项目的配置比较多，这里就不分别介绍了，可以 访问官方文档

五、项目迁移

剩下的就是比较简单的工作了，因为 2.0/3.0/4.0 的src目录是基本一致的，所以照着原来的项目搬进来就可以了

唯一需要注意的就是路径的问题了

结束语

最后，感谢「不想写代码的码农的」提供的以上内容

---

附件

---

1. 本文无附件，如有附件将会在此处提供下载 ↩︎