vue 配置不同打包环境（分享）

已于 2024-03-22 14:23:02 修改
阅读量710 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js 前端
于 2023-03-23 10:45:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60547084/article/details/128788736
版权

文章目录

常见的打包环境

在这里插入图片描述

  • .env 是全局环境，一般用于开发环境(可以使用其他环境去覆盖相同配置)
  • .env.production 是生产环境
  • .env.test 是测试环境

在这里插入图片描述

  • serve 对应的开发环境
  • build 对应生产环境
  • test 对应的测试环境

标注：需要通过 --mode 去匹配对应的环境文件，而开发环境不需要配置
测试环境不会生成 css 文件，而是每个组件生成对应的 js 文件

编写环境文件的注意事项

在这里插入图片描述

  • NODE_ENV：用于匹配环境，一般与环境文件名称对应，不然会出现问题，比如生产环境我写成 NODE_ENV=production.666 他就不是按照生产模式匹配
  • VUE_APP_xxx_xxx：自定义字段名称，可以设置任意变量，可以通过process.env获取
codeCat!
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue 不同环境配置不同的打包命令
10-17
主要介绍了详解vue不同环境配置不同的打包命令，主要包括正式环境、测试环境和开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目中运用webpack动态配置打包多种环境域名的方法
10-16
本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。需要的朋友跟随小编一起看看吧
vue-cli4 配置不同开发环境打包命令
qq_43532275的博客
07-24 859
vue-cli4 配置不同开发环境打包命令
Vue项目根据不同运行环境打包项目
小破孩的博客
11-30 4512
场景 在开发过程中，通常会遇到这样的问题： 在开发环境、测试环境和生产环境中我们会用到不一样的服务接口 在生产环境出现了出现了某个bug，但是在测试环境不存在，这时候就需要开发环境访问生产环境的接口 多端一体的项目模式 这些情况都要手动去切换接口地址，这样会很麻烦，有时还可能出现操作失误。这时候就需要用到cross-env进行分环境配置了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。 第一步 安装依赖 cross-env 使用 cross-env 解决跨平台问题。在终端运行： npm
vue 区分多环境打包
最新发布
细节怪的博客
05-20 350
区分不同的环境（测试、正式环境）
vue项目配置不同环境打包指令（vue-cli2、vue-cli3项目）
xilejie的博客
04-11 4144
根据指令打包不同环境的dist包。
解决vue打包一次部署到不同的服务器的问题
qq_28013889的博客
06-15 1878
在工作的时候，往往碰到同一套vue前端代码程序需要部署到很多的服务器上，每次更改完程序都需要打包部署到各个服务器上，因为每个服务器的访问地址和端口都不一样，如果用的若依自带的框架，需要每次都需要打包好多个包，一个端口打一个，要是需要部署在10000个服务器，那么每天啥也不用干，写程序1小时，打包得两三天，要命了就，哈哈哈解决这个问题的唯一途径就是打一次包，部署到不同的服务器上就可以，这样就省下很多打包的时间了。这个问题解决完后，又出来了新的问题，无法使用了，然后又要解决websocket的问题；
vue打包环境配置
xiaomingzi_12345的博客
06-29 2666
注意：日常开发是用开发环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。步骤一：手动创建 文件 .env.development 和.env.production和.env.test几个文件。.env.production如下：（正式线上环境，或者叫生产环境）步骤三:在axios封装中使用环境配置项（api.js中）.env.development如下：（开发环境）.env.test（测试环境）
vue实现分环境进行打包
weixin_43898997的博客
03-08 3701
vue+webpack分环境进行打包
vue工程包含多个项目且支持多个环境部署
骚饼
04-03 2514
vue工程包含多个项目且支持多个环境部署
vue项目分环境打包配置不同命令
06-26
vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子
Electron + vue 打包桌面操作流程详解
10-16
同时，修改Vue配置文件`config/index.js`中的`assetsPublicPath`，将`/`更改为`./`，以确保资源路径的正确解析。 4. **修改`electron.js`** 更新`electron.js`中的`mainWindow.loadURL()`方法，指定Vue项目的构建...
vue项目webpack根据不同环境打包不同的文件
qq_40425411的博客
05-07 2717
vue项目webpack根据不同区域打包不同的文件步骤 需求简介：不同的区域获取不同的功能权限目录，打包的时候不将全部前端文件打包进去，各个地区有哪些功能 就打包哪些功能的文件，分区域部署。 思路： 1.构建一个下webpack的环境变量，再在npm run build:XX 带不同参数 2.这样不同的npm 命令就会有不同的环境变量 3.router.js 里再根据环境变量来注册路由 步骤 1....
vue 自定义命令控制打包运行切换环境。
举案齐眉意难平
02-22 1402
如何自定义vue 打包，运行的npm 指令
vue的环境配置 生产环境和开发环境配置
热门推荐
真真的博客
06-29 1万+
vue的环境配置 生产环境和开发环境配置
vue2配置不同环境打包指令（vue-cli3）
weixin_45606890的博客
12-27 792
vue配置打包指令
vue如何配置研发/测试/生产环境?
Meta.Qing的博客
08-26 1886
我们在vue项目根目录添加以下3个文件:.env.development #本地开发环境.env.test #部署测试环境.env.production #部署生产环境#拓展.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 忽略例如FOO=bar#警告#不要在你的应用程序中存储任何机密信息（例如私有 API 密钥）！#......
vue 打包镜像，根据不同的环境配置域名
07-16
在Vue项目中，可以通过配置不同的环境变量来根据不同的环境配置域名。这样在打包时，可以根据不同的环境自动切换域名。 首先，在Vue项目的根目录下，找到`config`文件夹，里面有一个`index.js`文件，这是项目的配置文件。 在`index.js`文件中，可以找到`module.exports`对象，里面定义了一些配置项。我们需要添加一个新的配置项来设置不同环境下的域名。 以下是一个示例： ```javascript module.exports = { // ... production: { // 生产环境配置 domain: 'www.example.com' }, development: { // 开发环境配置 domain: 'dev.example.com' }, // ... } ``` 在上面的示例中，我们添加了两个配置项，分别是`production`和`development`。你可以根据需要添加更多的配置项，比如测试环境等。 接下来，在你的代码中，可以通过访问`process.env`来获取当前环境的配置。例如，你可以在API请求中使用这个配置项： ```javascript const apiDomain = process.env.NODE_ENV === 'production' ? process.env.production.domain : process.env.development.domain; axios.get(`http://${apiDomain}/api/data`) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }); ``` 在上面的示例中，我们通过判断`process.env.NODE_ENV`的值来确定当前的环境，然后根据不同的环境获取对应的域名配置。 最后，在打包时，可以使用不同的环境变量来指定要打包的环境。比如，你可以使用以下命令来打包生产环境的代码： ```shell NODE_ENV=production npm run build ``` 这样就可以根据不同的环境配置域名，并在打包时自动切换域名。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值