vue2使用vue-cli创建的前端项目，打包环境、nginx代理配置

@熊孩子。

于 2025-06-27 10:50:12 发布

阅读量171

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_47817450/article/details/148947846

1、对于vue2项目使用vue-cli生成的，新建.env.development和.env.production公共文件（注意：=后面不能有空格，我测试有空格会配置错误，找了很长时间）

1.1、.env.development存放VUE_APP_BASE_URL =/dev-api

1.2、.env.production存放VUE_APP_BASE_API =/prod-api

2、对于vue.config.js文件夹，此文件夹是开发环境的代理配置

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      "/dev-api": {
        target: "",//放置你的后端地址,比如:localhost:9525,若直接访问服务器地址，填写服务器后端地址即可，如:http://192.168.0.147:9525
        changeOrigin: true,
        pathRewrite: {
          "^/dev-api": "",
        },
      },
    },
  },
});

3、对于service文件夹（vue-cli使用process.env获取公共文件）

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 1000 * 15, // request timeout 设置请求超时时间，单位（毫秒）
});

4、package.json文件打包命令(运行npm run dev会运行开发环境配置，npm run build会默认使用生产环境打包，即npm run build等价于npm run build:prod,npm run build:prod会打包生产环境，可根据build --mode prod进行打包环境的配置)

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:prod": "vue-cli-service build --mode prod"
  },

5、nginx配置

# 转发 API 请求到后端服务
    location /prod-api/ {
        proxy_pass http://192.168.0.111:7777/;  # 后端 API 服务地址（只是举个例子，后端地址根据    #实际情况填写）
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

	# 转发认证头
        proxy_set_header Authorization $http_authorization;
        proxy_set_header Cookie $http_cookie;
    }