【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,	//是否启用ssl
	  proxy: {
	  	//配置跨域
			[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.conf

server {
  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

完成！