Vue通过nginx转发后dist文件页面样式丢失

修改Nginx配置:

nginx转发静态文件:

location /zqpage/ {
            root E:/ecidi/app/zffp_web/systemcenter/;
            # root E:/zqpage;
            try_files $uri $uri/ /zqpage/index.html;
            # proxy_set_header X-Forwarded-For $remote_addr;
        }

通过nginx转发后访问前端页面发现页面显示丢失:

解决方法:
在这里插入图片描述

要在nginx中配置vue dist文件访问,您需要将nginx配置修改为以下内容: ``` server { listen 80; server_name yourdomain.com; # 静态文件目录,这里指向vue打包后的dist目录 root /var/www/yourdomain.com/dist; # index.html作为默认页面 index index.html; # 处理静态文件的请求 location / { try_files $uri $uri/ /index.html; } } ``` 上面的代码将静态文件目录设置为`/var/www/yourdomain.com/dist`,这是您打包Vue项目后生成的dist目录。此外,我们还使用`try_files`指令来处理静态文件请求,这将使nginx尝试查找请求的文件,如果找不到,则重定向到index.html。 接下来,让我们来看看如何在nginx中配置axios跨域。 ``` server { listen 80; server_name yourdomain.com; # 静态文件目录,这里指向vue打包后的dist目录 root /var/www/yourdomain.com/dist; # index.html作为默认页面 index index.html; # 处理静态文件的请求 location / { try_files $uri $uri/ /index.html; } # 处理跨域请求 location /api/ { proxy_pass http://your.api.server; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, DELETE, PUT'; add_header Access-Control-Allow-Headers 'Content-Type, Authorization, Accept'; } } ``` 上面的代码将/api/路径下的所有请求代理到http://your.api.server,并添加了一些跨域响应头,包括`Access-Control-Allow-Origin`、`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`。 注意,如果您的Vue应用程序使用了Vue Router,那么您需要将router的模式设置为history模式,以便nginx正确地处理路由。您可以在Vue Router中进行如下配置: ``` const router = new VueRouter({ mode: 'history', routes: [...] }) ``` 希望这些信息能够帮助您!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值