cli4.0快速搭建一个项目的方法步骤(2)

"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="生产环境域名"

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

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目录是基本一致的,所以照着原来的项目搬进来就可以了

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

结束语

本来,这个文章真的是为了从 2.0 迁移到 3.0 的,没想到 4.0 都发布了,那刚好迁移到 4.0 得了

文章标题我会修改为 4.0,但是文章内可能还会有 3.0 我就不修改了

一是证明我的最初想法,二是感慨前端的发展速度!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/78a197be154aa831e632d7864ec70682.html