100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue项目nginx反向代理配置

vue项目nginx反向代理配置

时间:2024-01-01 15:19:16

相关推荐

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: /config/#devserver-proxy[process.env.VUE_APP_BASE_API]: {// target: `http://localhost:8080`,target: `http://----`,//业务请求ipchangeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}}},disableHostCheck: true}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。