宝塔 nginx 运行 vue项目

宝塔 安装nginx#

nginx 根目录： /www/server/nginx/html

修改nginx 配置#

下滑到70多行，添加 server 对象内容，内容如下

    server {
      listen  82;
      server_name test2;
       location / {
            root   html/test2;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api/ {
            proxy_pass http://172.16.8.9:8888/;
        }
      error_page 500 502 503 504 /50x.html;
      location = /50x.html {
       root html;
      }
    }

保存#

注意事项#

1. 使用history模式，页面显示空白
   解决方法：将dist文件夹的内容，放到nginx服务器运行即可

2. vue 打包成dist后，代理跨域设置失效
   解决方法：使用nginx服务器运行，并在nginx服务器的配置文件中，进行代码配置
   配置代码如下：

location /api/ {
	proxy_pass http://172.16.8.9:8888/;
}

注：

• /api 变成 /api/**
• proxy_pass 设置的地址后面,一定要加 / 与分号

3. 解决子组件页新刷新显示404的问题，
   配置代码如下：

location / {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
}

参考链接#

https://www.bilibili.com/read/cv20095657/