VUE 识别生产环境开发环境

最新推荐文章于 2025-05-27 11:41:19 发布

莉莎的脑瓜疼呀脑瓜疼~

最新推荐文章于 2025-05-27 11:41:19 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： VUE

本文链接：https://blog.csdn.net/weixin_42322501/article/details/88417712

本文介绍了如何在Vue项目中区分开发和生产环境的API配置，通过在dev.env.js和prod.env.js设置不同的API_ROOT，并在项目中实现自动识别切换。这种配置方式使得打包后项目仍能正常调用接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

恩~~~开发环境和生产环境接口往往不同~

开发环境+生产环境，开发环境就是在 /config/index.js下配置proxyTable 。

这里简单贴一下代码，不多讲。

 proxyTable: {
      '/api': {    //将www.exaple.com印射为/apis
          target: 'https://xxx',  // 接口域名
          changeOrigin: true,  //是否跨域
          pathRewrite: {
              '^/api': ''   //需要rewrite的,
          },
          secure: false,
          headers: {
              Referer: 'https://xxx'
          }
      }
    },

主要讲一下生产环境的问题。貌似是因为打包项目后代理就失效啦，所以再生产环境下要重新配置一下。网上的方案有很多种，这里就讲一种我个人觉得还是挺不错滴，生产和开发环境自动识别切换的一种配置方式。

（1）再config/dev.env.js下配置开发环境的API_ROOT

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"