【VUE】记录一次 VUE中配置生产环境和开发环境方法

前言

我这里 使用Vue CLI（Vue Command Line Interface）创建Vue.js项目是一种简单的方式，它提供了一个交互式的命令行工具来帮助你初始化和管理Vue.js项目。

并且我这个项目需要区分生产环境和开发环境。这里具体完整记录下，整个过程。

环境

• nginx访问端口：8888
• 前端端口：8888
• 后端端口：8080

具体步骤

1. 安装Vue CLI：

首先，确保你已经安装了Node.js。然后打开终端并运行以下命令来安装Vue CLI：

npm install -g @vue/cli

2. 创建Vue.js项目：

在终端中，使用以下命令创建一个新的Vue.js项目：

vue create my-vue-project

my-vue-project是你的项目名称，你可以替换为你喜欢的名称。

3. 模式简介

以下内容来自： https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

vue-cli-service build --mode development

4. 创建配置环境文件

1. .env.test（测试环境）配置内容

NODE_ENV = 'production'//用来表示是生产环境还是开发环境
VUE_APP_MODE = 'test'//用来表示是生产环境还是测试环境
VUE_APP_BASE_URL = /test-api    //这个地址不能带引号，不然获取的就带引号,并且路径指向后端
outputDir = test //用来表示打包的名字

2. .env.development（开发环境）配置内容

NODE_ENV = 'development'
VUE_APP_MODE = 'development' 
VUE_APP_BASE_URL = /dev-api

3. .env.production文件（生产环境）配置内容

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = /prod-api // 这里填写生产环境的后端地址

5. 在package.json中添加打包

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","build:test": "vue-cli-service build --mode test",//新添加，打包时，打包test环境"build:prod": "vue-cli-service build --mode production",//新添加，打包时，打包production环境"build:dev": "vue-cli-service build --mode development",//新添加，打包时，打包development环境"lint": "vue-cli-service lint"},

6. 在vue.config.js中配置

module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,devServer: {port: 8888,host: '0.0.0.0',https: false,	//是否启用sslproxy: {//配置跨域[process.env.VUE_APP_BASE_URL]: {target: "http://localhost:8080",ws: true,changOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_URL] : '/'}}},}
})

重点：

proxy: {//配置跨域[process.env.VUE_APP_BASE_URL]: {target: "http://localhost:8080",ws: true,changOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_URL] : '/'}}

其中 process.env.VUE_APP_BASE_URL 对应的是上面配置的不同环境的 VUE_APP_BASE_URL ，我这里是 /dev-api 、/prod-api、/test-api。

pathRewrite: {['^' + process.env.VUE_APP_BASE_URL] : '/'
}

这个是 将 /dev-api 、/prod-api、/test-api 改为 ’/‘。

7. http.js (axios )

console.log(process.env.VUE_APP_BASE_URL)
//创建axios实例
var service = axios.create({baseURL: process.env.VUE_APP_BASE_URL,timeout: 15000,headers: {// 'content-type': 'application/json',// "token":'14a1347f412b319b0fef270489f'}
})

8. 打包

npm run build:prod

参考第5步，我们修改的脚本。因为我这里打包的是生产环境，故用这个命令。

上传到服务器，略。

9. nginx 配置

linux 服务器上nginx配置如下：

vim /usr/local/nginx/conf/conf.d/vue.confserver {listen 8888;server_name 172.25.34.157;  # 可以根据需要修改location / {root /var/www/html/dist;  # 指向 Vue 项目的 dist 目录index index.html index.htm;try_files $uri $uri/ /index.html;  # 处理单页面应用路由}location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://localhost:8080/; #指向后端地址}# 可以添加其他配置，如 SSL 配置等
}

重载 nginx 服务

/usr/local/nginx/sbin/nginx -s reload

完成！