nginx部署vue项目后微信授权跳转始终跳到welcome to nginx欢迎页问题解决

最新推荐文章于 2024-07-19 08:00:00 发布

随风落梦

最新推荐文章于 2024-07-19 08:00:00 发布

阅读量5.6k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js nginx 微信

本文链接：https://blog.youkuaiyun.com/chenludaniel/article/details/122996152

本文记录了在Windows环境下使用Nginx部署多个Vue项目的详细步骤，包括Vue项目的配置调整、Nginx配置文件的修改以及解决打开页面总是跳转到Nginx欢迎页的常见问题。主要涉及Vue的publicPath和router.base设置，以及Nginx server块的location配置。通过正确配置，成功实现了通过http://192.168.1.16:1111/simplevantvue/访问项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搞了2天部署测试，始终就是出现打开地址后跳转到nginx的默认欢迎页，代码怎么弄都没用，后来发现还是nginx配置问题，这里记录下整个流程：

首先我们的前提是nginx中部署多个VUE项目

1、在VUE项目里面的vue.config.js文件中config下面的publicPath值需要指定，我这里是publicPath: "/simplevantvue"（如果还有另一个项目同样的把/后面的替换成相应的值）。其次可选设置outputDir: 'simplevantvue'，如果不设置默认build之后是dist文件夹，设置了就是对应设置的文件夹。

2、修改router里面的值，看个人实际项目搭建情况(有的人是router.js，有的人是index.ts或其他)，对于vue 3.0之前版本，将里面的base值改为相对应的，这里是export default new Router({base:'/simplevantvue'})。对于>=vue 3.0的，将createRouter里面的history值改为相对应的值，这里是history: createWebHistory('/simplevantvue')。

3、windows里部署，下载nginx解压后，我这里为D:\nginx-1.20.2 进入此目录，打开nginx.conf，添加一个server，如下：

server {
listen 1111;
server_name 192.168.1.16;

location /simplevantvue {
root html;
index index.html index.htm;
try_files $uri $uri/ /simplevantvue/index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

4、将build的文件夹拷贝到html目录下

5、执行http://192.168.1.16:1111/simplevantvue/就可以打开了

注意：nginx配置里面的try_files后面的/simplevantvue一定要加，不然总是跳到nginx欢迎页。

如果要再在1111端口添加另一个，则只需要在添加一个location