Vite构建的Vue3项目打包后dist文件夹放Nginx服务器访问添加上下文路径

最新推荐文章于 2024-07-12 20:53:39 发布

阿敏Joney

最新推荐文章于 2024-07-12 20:53:39 发布

阅读量3.3k

点赞数 1

分类专栏：前端相关 Vue 文章标签： Vite Vue3 访问路径 Nginx配置 base 打包

本文链接：https://blog.csdn.net/xfwdxt/article/details/131658964

版权

前端相关同时被 2 个专栏收录

16 篇文章 2 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

文章详细介绍了如何通过修改vite.config.ts的base配置、设置路由历史模式以及Nginx服务器的location规则，特别是location上下文路径，来实现以http:127.0.0.1:8098/context为访问入口的Web应用部署。同时，提到了Vue应用接口的配置不受上下文影响。

摘要由CSDN通过智能技术生成

操作步骤

以访问路径端口号后面的上下文context为例子，最终的访问效果为：http:127.0.0.1:8098/context

1.vite.config.ts配置文件

base: '/context',

2. 路由配置文件

const router = createRouter({
  history: createWebHistory('/context/'), // 与步骤1中的保持一致（注意斜杠）
  routes
})

3. Nginx配置文件

假设build后的静态文件夹采用默认的名称：dist
假设dist文件存放在Nginx服务器上的目录：/usr/local/nginx/www
假设访问的端口为：8098
基于以上假设，则重启nginx后访问的路径为：
http:127.0.0.1:8098/context

server {
        listen       8098;
        charset 	 utf-8;
        location /context {
        	alias /usr/local/nginx/www/dist;
        	index index.html;
       		try_files $uri $uri/ /index.html last;
    	}

	    # 下面的为Vue应用访问接口的配置（不受上下文的影响）
        location /xxx {
            proxy_pass http://ip:port;
        }
}