vue 区分多环境打包

已于 2024-06-13 10:50:56 修改
阅读量361 收藏
点赞数 4
文章标签： vue.js 前端 javascript
于 2024-05-20 17:46:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48571414/article/details/139071079
版权

需求：区分不同的环境（测试、正式环境），接口文档地址不同；

配置步骤：

1、在根目录下面新建 .env.xxx 文件（xxx 根据环境不同配置）

      打包部署的时候，.env.xxx 文件中一定要配置的参数项为：NODE_ENV，且值为“production”，如果要让其他程序员可以清晰的区分环境，我们可以再配置一个 ENV 变量。

2、在packag.json 文件的 scripts 中新增打包命令： “build：xxx” （可任意命名）

vue-cli 官网中的相关内容：

CLI 服务 | Vue CLI

环境变量和模式 | Vue CLI     ❤

gyuhao_o
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 项目分环境打包的方法示例
12-13
我们开发项目的时候，用vue-cli 2.x版本新建的项目，只有dev, pro两种开发环境, 有时需要个test环境来给测试使用，所以找了很多方法，总结了个最简单的方法来给大家使用 1、package.json 在build下面添加一个test运行命令 "test": "node build/build.js" 2、prod.env.js 在config -> prod.env.js 中修改代码 'use strict' // 读取系统运行时候的变量 const target = process.env.npm_lifecycle_event; // 控制台日志输出 con
vue项目分环境打包的具体步骤 --- 区分测试环境与线上环境的打包引用路径
m0_71902265的博客
12-05 972
vue项目分环境打包的具体步骤 --- 区分测试环境与线上环境的打包引用路径
[Vue]Vue cli3 打包build 区分测试环境和正式环境
iChangebaobao的博客
08-05 2286
https://blog.csdn.net/qq_37639389/article/details/97789966 https://blog.csdn.net/linbenjian/article/details/85261201
vue通过打包配置区分环境
weixin_43827751的博客
12-26 430
用于正式环境的配置。然后可以在这些文件中指定不同的环境变量，在代码中通过。在Vue中，通常会使用环境变量来区分打包测试环境和正式环境。这样可以在代码中根据环境变量来区分不同的环境，比如在Vue的。通过这种方式，你就可以区分打包测试环境和正式环境了。文件来管理环境变量，你可以在项目根目录下创建不同的。文件来分别指定测试环境和正式环境的配置。参数来指定使用哪个环境配置。用于测试环境的配置，创建。表示使用测试环境配置，表示使用正式环境配置。
vue2.0多环境打包配置记录
qq_41944038的博客
04-23 452
主要记录vue不同打包命令下的配置
vue项目多项目打包环境配置
m0_64026548的博客
04-22 255
前端开发小技巧，多配置打包命令
vue3不同环境的打包区分
小菜鸟的博客
11-01 845
vue3不同环境的打包区分 首先在vue.config.js中写入 const path = require('path') //导入路径插件 let isProduction = process.env.NODE_ENV == 'production', //判断当前的环境“pro”生产环境 dev开发环境 url; //定义url if (isProduction) { // 生产环境 url = 'http://10.0.0.222:8003/bizv5a5wdsu/'
vue项目区分环境打包
TestingShare
05-06 263
在本地测试的时候，需要使用本地的接口地址，build打包后需要使用线上接口地址，每次都需要手动更改，非常麻烦，有时候还可能忘记更改，将本地的接口地址打包上线(非开发人员哈，开发才不会犯这样的错误)npm run serve 是本地启动，npm run build 是打包。文件名为.env.test;.env.prod 通过名称进行区分；当执行对应的命令时，查找到关键字mode 对应文件名，找到配置项目。#####2、在文件中进行接口根路径配置。######3、在对应位置写入引用的变量。
vue实现分环境进行打包
weixin_43898997的博客
03-08 3705
vue+webpack分环境进行打包
详解vue 不同环境配置不同的打包命令
12-11
最近做的一个项目是配置了三个环境的：正式环境、测试环境和开发环境，下面以这个为例 第一步：安装cross-env npm i --save-dev cross-env 或者在 package.json中加上”cross-env”: “^5.0.1″进行安装依赖 ...
nuxt.js添加环境变量,区分项目打包环境操作
01-18
配置打包环境变量时，发现nuxt.js的文档过于简单，无法做参照。 经查证了一些资料后，解决了该问题。遂整理成文档，发布于此，给同行一些参照。 一、添加cross-env插件 npm npm i cross-env yarn yarn add cross-...
vue项目多入口配置
10-10
vue项目简单的多入口配置的相应更改，可配置为打包成多个html文件，通过访问不同的地址进行对应页面的跳转，简单明了的进行区分多个入口文件
如何在基于vue-cli的项目自定义打包环境
10-17
`cross-env`使得我们能够在不同环境下设定环境变量，如`NODE_ENV`，这样在打包时可以根据这个变量来区分当前是哪个环境。安装`cross-env`可以使用以下命令： ```bash npm install cross-env -D ``` 然后在`package...
vue-cli3环境变量与分环境打包的方法示例
10-17
本篇文章将详细介绍如何在 Vue CLI 3 中配置环境变量以及实现不同环境的打包。 首先，我们来看环境变量的概念。在 Vue CLI 3 中，环境变量通常存储在根目录下的 `.env` 文件系列中。主要有以下几个文件： 1. `.env...
vue项目分环境配置打包处理
总结前端开发中遇到的问题，分享前端知识
11-26 1212
vue项目分环境配置打包处理主要包括几方面：本地环境配置；生产环境配置；打包处理；打包配置处理（扩展）
vue node nvm管理工具
qq_41820986的博客
06-21 236
nvm是Node.js的版本切换器，也就是说你的电脑可以不止一个node版本，并且可以随时切换。简单说一下这个是干什么用的，你安装完nvm后，下载对应node如果没有添加下面两段代码的话，你是只有node，没有npm的，所以必须要加上这两段代码。完成上面操作后，你的nvm就安装完成了，输入nvm -v就版本号就没问题了，剩下的就是下载对应node版本，切换node版本。准备工作：安装nvm需要卸载你之前的node，卸载的话，就直接打开电脑的控制面板，在里面找到node然后右击选择卸载即可。
vue2 + Lodop 制作可视化设计页面 实现打印设计功能（一）
最新发布
Qiyandays的博客
06-21 257
vue + Lodop 制作可视化设计页面 实现打印设计功能
nginx线上部署多个vue项目(路径区分)
07-09
### 回答1： 在Nginx中部署多个Vue项目，可以通过配置不同的路径来区分。 首先，确保每个Vue项目都已经成功地打包生成了静态文件。然后，在Nginx的配置文件中添加对应的配置。 以下是一个简单的示例： 1. 假设我们有两个Vue项目，一个叫做Project1，另一个叫做Project2。 2. 在Nginx的配置文件（通常是在/etc/nginx/nginx.conf或者/etc/nginx/conf.d/default.conf）中，找到 server 部分。 3. 在 server 部分下，添加如下配置： ``` location /project1 { alias /path/to/project1/dist; try_files $uri $uri/ /project1/index.html; } location /project2 { alias /path/to/project2/dist; try_files $uri $uri/ /project2/index.html; } ``` 4. 在上述配置中，/project1 和 /project2 是访问时的路径，可以根据实际需求自行修改。 5. /path/to/project1/dist 和 /path/to/project2/dist 是各自Vue项目打包生成的静态文件所在的目录路径。 6. try_files $uri $uri/ /project1/index.html; 和 try_files $uri $uri/ /project2/index.html; 是为了处理历史路由问题，确保刷新页面时能正确加载对应的index.html文件。 7. 保存配置文件并重新加载Nginx配置：sudo service nginx reload。 8. 最后，通过访问 http://your-domain/project1 和 http://your-domain/project2，即可访问到不同的Vue项目。 通过以上配置，我们就可以在同一个Nginx服务器上部署多个Vue项目，并通过路径区分。当然，这只是一个简单示例，根据实际情况，可能还需要根据具体需求进行更详细的配置。 ### 回答2： 在nginx线上部署多个vue项目并进行路径区分的方法如下： 1. 配置nginx：打开nginx配置文件（通常为nginx.conf或者sites-available/default），添加多个location块来分别指定每个项目的路径。例如： ``` server { listen 80; server_name example.com; location /project1 { alias /path/to/project1/dist; try_files $uri $uri/ /project1/index.html; } location /project2 { alias /path/to/project2/dist; try_files $uri $uri/ /project2/index.html; } } ``` 这里使用alias指令来指定项目的实际路径，try_files指令用于处理vue项目的路由。 2. 构建vue项目：在本地使用vue-cli构建每个vue项目，并将构建后的静态文件（通常在dist目录下）复制到对应的路径下。 3. 重启nginx服务：保存配置文件后，通过命令行或者控制面板重启nginx服务，使配置生效。 4. 访问项目：现在可以通过浏览器访问每个vue项目了。例如，如果nginx服务器的IP地址是192.168.0.1，那么可以通过访问http://192.168.0.1/project1来访问第一个项目，访问http://192.168.0.1/project2来访问第二个项目。 这样就通过nginx实现了多个vue项目的线上部署，并且通过路径进行了区分。 ### 回答3： nginx是一个轻量级的高性能的HTTP和反向代理服务器，可以实现静态资源的快速访问和负载均衡。要在nginx上部署多个vue项目并进行路径区分，可以按照以下步骤进行。 1. 服务器环境准备：确保服务器上已经安装了nginx，并且配置好了要使用的域名。 2. 创建多个vue项目：每个项目对应一个不同的路径，例如项目1对应路径"/project1"，项目2对应路径"/project2"等。 3. 编译vue项目：在本地使用"npm run build"命令编译每个vue项目，并将编译后的文件保存在不同的目录中。 4. 配置nginx：打开nginx的配置文件，一般是位于/etc/nginx/nginx.conf或者/etc/nginx/conf.d/default.conf。在"server"块中添加以下代码，用于区分不同的项目路径： ``` server { listen 80; server_name your_domain.com; location /project1 { root /path/to/project1/dist; try_files $uri $uri/ /project1/index.html; } location /project2 { root /path/to/project2/dist; try_files $uri $uri/ /project2/index.html; } # 其他项目配置... } ``` 5. 重新加载nginx配置：保存并关闭配置文件后，使用命令"sudo service nginx reload"重新加载nginx的配置，使其生效。 6. 验证部署：访问服务器的域名，加上不同的路径后缀，例如"http://your_domain.com/project1"和"http://your_domain.com/project2"，验证是否能够正确访问到对应的vue项目。 通过以上步骤，我们可以在nginx上部署多个vue项目并进行路径区分，以实现在一个服务器上同时运行多个项目的需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值