vue-cli 4.0 安装使用

一、升级本地环境

因为vue-cli 4.0要 nodeJs >= 8.9(官方推荐8.111.0)

卸载:
npm uninstall -g vue-cli

安装 4.0:
npm install -g @vue/cli

安装以后查看版本号:
vue -V

二、搭建项目

创建项目:
vue create vue-project

三、环境配置

下面就是关于项目的环境配置,我这边一般喜欢用 test,pre,prod分别测试,预发布,生产三种环境

修改package.json 文件如下

"scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode dev",   //测试
    "pre": "vue-cli-service build --mode pre",    //预发布
    "prod": "vue-cli-service build --mode prod",  //生产
    "lint": "vue-cli-service lint"
}


在项目根目录下新建 .env.test .env.pre .env.prod 文件,分别兑仓三个环境的配置文件,注意名字要与 --mode后面的你名字分别对应

.env.test 代码如下
    NODE_ENV=test
    VUE_APP_BASE_URL = 测试环境域名

.env.pre 代码如下
    NODE_ENV=pre
    VUE_APP_BASE_URL = 预发布环境域名

.env.prod 代码如下
    NODE_ENV=prod
    VUE_APP_BASE_URL = 生产环境域名

四、环境配置

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

五、项目迁移

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

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

评论