vue打包dist包,通过nginx反向代理,在本地访问

1 篇文章 0 订阅

第一步:去官网下载nginx

第二步:打开配置文件:conf/nginx.conf,有三处配置

server {
    listen 8888;

    location / {
        # 配置dist文件路径
        root /project/project-rsdq/RSDQ/rsdq-client/dist;
        index index.html index.htm;
    }

    # 反向代理 转发http请求
    # rsdq-web 需与 vue.config.js里的跨域配置proxy里的名称一致
    location /rsdq-web{
        proxy_pass http://172.33.44.11:8081/rsdq;
    }
}

命令:

(1)start nginx   -> 启动

(2)nginx -s stop  -> 停止

(3)nginx -s reload  -> 重启

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是一个简单的 nginx 本地部署 Vue 应用并反向代理配置的示例: 1. 打包 Vue 应用 首先需要在本地打包 Vue 应用,运行以下命令: ``` npm run build ``` 打包完成后,会在项目根目录下生成一个 `dist` 目录,其中含了所有打包后的静态文件。 2. 配置 nginxnginx 的配置目录中,创建一个新的配置文件,比如 `myapp.conf`,并将以下内容复制进去: ``` server { listen 80; server_name myapp.com; root /path/to/dist; # 将 "/path/to/dist" 改为你实际的 dist 目录路径 index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8080/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; } } ``` 其中,`myapp.com` 是你的域名,`/path/to/dist` 是你的 Vue 应用的打包后的静态文件所在的目录路径,`/api/` 是你要反向代理的后端 API 的前缀,`localhost:8080` 是你要代理的本地服务地址。 在上面的配置中,`location /` 部分将所有请求都指向 Vue 应用的入口文件 `index.html`,`location /api/` 部分将以 `/api/` 开头的请求代理到本地服务上,并设置了一些请求头,括 `Host`、`X-Real-IP` 和 `X-Forwarded-For`。 3. 启动 nginx 将 `myapp.conf` 配置文件放置在 nginx 的配置目录中,通常位于 `/etc/nginx/conf.d/` 目录下。最后,重启 nginx 服务以应用新的配置。 ``` sudo service nginx restart ``` 现在,你可以通过访问 `http://myapp.com` 来访问 Vue 应用,并通过访问 `http://myapp.com/api/` 来访问本地服务的 API 接口了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值