nginx+vite 项目打包及部署(添加二级路由发生的错误)

最新推荐文章于 2025-05-15 20:25:24 发布

通域

最新推荐文章于 2025-05-15 20:25:24 发布

阅读量802

点赞数 1

CC 4.0 BY-SA版权

分类专栏： linux nginx node 文章标签： nginx 服务器前端

本文链接：https://blog.youkuaiyun.com/xiaomzhng/article/details/132384992

linux 同时被 3 个专栏收录

32 篇文章

订阅专栏

node

9 篇文章

订阅专栏

nginx

2 篇文章

订阅专栏

文章描述了在开发过程中遇到的错误信息，源于nginx配置中处理二级路径时的MIME类型设置不正确，以及VITE_PUBLIC_PATH和vite.config.ts的配置。解决方法涉及调整nginx的location配置，确保正确处理二级路由和资源引用。

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

错误信息

_app.config.js:1  Uncaught SyntaxError: Unexpected token '<'
daas/assets/index.edf40865.js:1  Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

原因

由于nginx 配置错误所导致的二级路径无法解析

.env.production(生产环境配置文件)

# 基础路径
VITE_PUBLIC_PATH = /demo

vite.config.ts


export default ({ mode }: ConfigEnv): UserConfig => {
  // 获取 .env 环境配置文件
  const env = loadEnv(mode, process.cwd());
  return {
    // 基础路径 
    base: env.VITE_BASE_PATH,
    ...
  }
}

nginx 配置

upstream 3.com {
  server 127.0.0.1:81;
 }
server {
    listen       3000;
    server_name  3.com;
    # 监听demo路径
    location /demo {
    #指向资源的路径,alias为当前index.html的目录,在处理二级路由时,应当使用alias,而不是使用root
	alias /opt/d/demo;
	index index.html;
         # /demo/index.html; 这里需要添加 /demo,而不能直接写/index.html;
		 try_files $uri $uri/ /demo/index.html;
    }
	
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

}