您好,欢迎来到养宠指南。
搜索
您的当前位置:首页

vue-cli项目根据线上环境分别打出测试包和生产包的方法

2022-06-15 来源:养宠指南
摘要
使用vue现在已经差不多2年了,想起来两年前的一次和某阿里处理的技术大牛(当时我们的技术总监)一起开发一个SPA项目的时候被硬着头皮去解决的一个难题,因为技术老大是阿里出身的,所以很多东西都是比较倾向于自动化,从项目ui设计到项目管理,到打包测试,到发布全部都要求我们要实现自动化,尽可能的减少手动操作。当时技术大佬要求的事在jenkins进行一键打包,就是他点击不同的按钮在同一套代码上面分别打包测试环境运行的包和正式环境运行的包,刚刚接触vue的我摸不着头脑,老大给了我一天时间研究这个玩意,没办
这篇文章主要介绍了vue-cli项目根据线上环境打出测试包和生产包的方法,内容挺不错的,现在分享给大家,也给大家做个参考。

最近用vue-cli搭建了项目,准备上线时发现脚手架自带的npm run buil只能打出请求生产接口的生产包,但是项目肯定要先上测试环境,怎么用命令行打出请求测试接口的测试包呢?

Step1: package.json中新增命令行脚本test命令,并指向build文件夹下的test.js。

"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js", "test": "node build/test.js" },

Step2. 在build文件夹中新建test.js,内容可以直接拷贝同目录build.js内容,修改一些参数。

这样就多了一个test环境。

Step3. 在build文件夹中新建webpack.test.conf.js,内容可以直接拷贝同目录webpack.prod.conf.js内容,修改一些参数。

这样构建时就会去config文件夹下的test.env.js寻找环境变量。

Step4.在config文件夹中新建test.env.js,内容可以直接拷贝同目录prod.env.js内容,修改一些参数。

这样在npm run test 就能打出请求测试接口的测试包了。

可以在dist-->js-->app.js中查看是否打包成功。

小编还为您整理了以下内容,可能对您也有帮助:

vue如何自动化打包测试环境和正式环境的dist/test文件

使用vue现在已经差不多2年了,想起来两年前的一次和某阿里处理的技术大牛(当时我们的技术总监)一起开发一个SPA项目的时候被硬着头皮去解决的一个难题,因为技术老大是阿里出身的,所以很多东西都是比较倾向于自动化,从项目ui设计到项目管理,到打包测试,到发布全部都要求我们要实现自动化,尽可能的减少手动操作。

当时技术大佬要求的事在jenkins进行一键打包,就是他点击不同的按钮在同一套代码上面分别打包测试环境运行的包和正式环境运行的包,刚刚接触vue的我摸不着头脑,老大给了我一天时间研究这个玩意,没办法,只好硬着头皮做,后来想想改造一下,也比较简单。

Step1、package.json中新增命令行脚本test命令,并指向build文件夹下的test.js。

Step2、在在build文件夹中新建test.js,内容可以直接拷贝同目录build.js内容,修改一些参数 这样就多了个test环境

Step3、在build文件夹中新建webpack.test.conf.js,内容可以直接拷贝同目录webpack.prod.conf.js内容,修改一些参数。

这样构建时就会去config文件夹下的test.env.js寻找环境变量。

Step4、在config下创建test.js文件

Step5、在封装的axios.js的文件夹下创建config.js

Step6、在封装的axios引入config.js

封装的get 和post请求

Step7、在config文件下的index增加test模块(可复制build)并更改相应的参数。

在打包的时候执行:npm run test 就会自动的指向测试环境的域名dist文件,执行npm run build 就会打包指向正式环境的域名的dist文件,在Jenkins里面的分别连接至gitlab/github,并将命令分别分配给run test && run build,需要发布的时候就直接点击不同的按钮,然后再Linux下自动打包不同环境的dist,可以提高开发效率,减少开发和沟通成本。

vue项目如何区分开发、生产和测试环境

1.在项目根目录, 注意是项目根目录, 跟vue.config.js、src文件夹同级。

新建文件: .env.proction

和文件: .env.test

2.在package.json文件中修改命令配置

以上配置完成后

可以在整个项目中获取到以下变量(几乎所有地方)

vue配置不同环境打包项目(dev、test、prod)

2.修改package.json文件,自定义打包命令 

3.修改config文件,添加对应环境的xxx.env.js文件

test.env.js文件

prod.env.js

dev.env.js

4.修改打包配置
打开build/webpack.prod.conf.js文件

    修改
    build/build.js

写入api文件

api/index.js文件

执行npm run build--test 、npm run build--prod 打包不同环境

vue配置不同环境打包项目(dev、test、prod)

2.修改package.json文件,自定义打包命令 

3.修改config文件,添加对应环境的xxx.env.js文件

test.env.js文件

prod.env.js

dev.env.js

4.修改打包配置
打开build/webpack.prod.conf.js文件

    修改
    build/build.js

写入api文件

api/index.js文件

执行npm run build--test 、npm run build--prod 打包不同环境

vue如何按照环境打包项目?如何在vue文件中使用process.env?

修改 config/prod.env.js 文件如下:

修改 config/dev.env.js 文件如下:

也就是说,如果我运行 npm run build test 命令,那么 process.argv.slice(2)[0] 得到的就是字符串 test ,前提是我的 package.json 文件中的命令没有去做其他的更改,如果你是用了其他的插件,请根据情况修改

但是这还不够, process.env 是node中的环境变量,在模块中是无法直接拿到的,比如 .js 、 .vue ,还需要配置一下 DefinePlugin

webpack.prod.conf.js

在vue文件中使用的获取方式相同

vue-cli3 配置不同环境请求地址,以及打包到不同文件夹

.env.development

.env.test

.env.proction

如果一个环境中,有多个不同请求地址,可以在环境配置文件中多配置几个 url,使用时,不配置 baseURL,相同请求地址接口写入一个文件,引入相应的 url,接口前单独加 url。

package.json scripts 配置

serve 命令不携带 --mode 时,默认运行环境为 development

build 命令不携带 --mode 时,默认运行环境为 proction

可根据当前环境写死,也可在环境配置文件中,加入打包到的文件夹名(有多个环境的时候比较方便)。

vue.config.js 配置

打包出来的文件不提交到 git 的话,配置 .gitignore。 将之前的 /dist 改为 /*dist

养宠指南还为您提供以下相关内容希望对您有帮助:

vue如何自动化打包测试环境和正式环境的dist/test文件

在打包的时候执行:npm run test 就会自动的指向测试环境的域名dist文件,执行npm run build 就会打包指向正式环境的域名的dist文件,在Jenkins里面的分别连接至gitlab/github,并将命令分别分配给run test && run build,需要...

vue-cli 2.x 多环境打包配置,根据打包命令生成不同的打包文件名

操作 在package.json中的scripts中添加相关环境地址,我的环境添加如下:test 为云测试环境 下面我们以test来配置环境 在config目录中配置test.env.js文件 } (1) 配置process.env.NODE_ENV = 'test'(2) const webpackCon...

vue项目如何区分开发、生产和测试环境

1.在项目根目录, 注意是项目根目录, 跟vue.config.js、src文件夹同级。新建文件: .env.production 和文件: .env.test 2.在package.json文件中修改命令配置 以上配置完成后 可以在整个项目中获取到以下变量(几乎所有地...

vue-cli3 配置不同环境请求地址,以及打包到不同文件夹

可根据当前环境写死,也可在环境配置文件中,加入打包到的文件夹名(有多个环境的时候比较方便)。vue.config.js 配置 打包出来的文件不提交到 git 的话,配置 .gitignore。 将之前的 /dist 改为 /*dist ...

小程序怎么打测试包和生产包

1、配置config,修改server/config,增加配置,修改MySQL相关的配置为本地的MySQL数据库。2、下载server包,初始化环境。3、初始化数据库。4、启动本地调试环境。

浅谈vue项目如何打包扔向服务器

1、项目目录结构这是打包后的,所以有 dist 文件夹,打包方式:npm run build。2、webpack.config.js这里只是一小部分,因为这边最关键的就是 publicPath,下面会提,这边可以解决静态资源 404 无法引入的问题。3、npm run ...

vuecli如何使用

集成打包上线方案。5. 还有一些优点,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等,等大家深入使用下去就会发现vue-cli的强大之处。本教程是基于windows系统。下面正式开始搭建vue-cli脚手架。命令行工具命令...

前端项目打包部署

通过vue-cli和webpack构建的项目体积一般都较大,在生产环境下,需要进行打包部署。1.准备 2.打包 3.部署 一闪而过 输入 http://localhost/dist ,可以看到项目运行结果

vue正式和测试环境打包后的文件资源不一致

根据查询相关公开信息,测试环境打包后的项目样式与正式环境打包的样式不一致要查看vue-cli2配置,发现跟样式相关及环境相关的配置就一处,在build/vue-loader.conf.js中的extract:isProduction,将其改为true后,测试环境打包...

vue2/vue3环境搭建

1、build:构建脚本目录 1)build.js ==> 生产环境构建脚本;2)check-versions.js ==> 检查npm,node.js版本;3)utils.js ==> 构建相关工具方法;4)vue-loader.conf.js ==> 配置了css加载器...

上一篇:基于Vue自定义指令实现按钮级权限控制的方法

下一篇:koa2实现拦截器进行登录前session的校验

Top