vue项目nginx反向代理配置

1.nginx配置文件设置
#开始配置我们的反向代理
location /prod-api{
rewrite ^/prod-api/(.*)$ /$1 break;
include uwsgi_params;
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://-----;//业务请求ip
}
注:prod-api 是vue项目定义的

2.vue项目配置
a.配置文件
.env.development

# 开发环境配置
ENV = 'development'

# 系统/开发环境
VUE_APP_BASE_API = '/dev-api'

.env.production

# 生产环境配置
ENV = 'production'

# 系统/生产环境
VUE_APP_BASE_API = '/prod-api'

b.vue.config.js配置

const port = process.env.port || process.env.npm_config_port || 80 // 端口
module.exports = {

// 部署生产环境和开发环境下的URL。
	publicPath: process.env.NODE_ENV === "production" ? "/h5/" : "/",
	// publicPath: process.env.NODE_ENV === "production" ? "./" : "./", //dist 本地可以浏览就用这个
	// 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
	outputDir: 'dist',
	// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
	assetsDir: 'static',
	// 是否开启eslint保存检测,有效值:ture | false | 'error'
	// lintOnSave: process.env.NODE_ENV === 'development',
	lintOnSave: false,
	// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
	productionSourceMap: false,
	// webpack-dev-server 相关配置
	devServer: {
	    host: '0.0.0.0',
	    port: port,
	    open: true,
	    proxy: {
	        // detail: https://cli.vuejs.org/config/#devserver-proxy
	        [process.env.VUE_APP_BASE_API]: {
	            // target: `http://localhost:8080`,
	            target: `http://----`,//业务请求ip
	            changeOrigin: true,
	            pathRewrite: {
	                ['^' + process.env.VUE_APP_BASE_API]: ''
	            }
	        }
	
	
	    },
	    disableHostCheck: true
	}


}
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值