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

た入场券 2023-10-14 23:16 3阅读 0赞

### 错误信息 ###

_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;
        }
    
    }

[vite]: https://so.csdn.net/so/search?q=vite&spm=1001.2101.3001.7020

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

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

错误信息 _app.config.js:1 Uncaught SyntaxError: Unexpected token '<' daas/assets

た入场券/ 2023年10月14日 23:16/ 0 赞/ 4 阅读

相关 vue项目部署后，二级路由刷新业务报404

1、现象我是前后端分离开发，前端采用的是vue+Element+axios;用的vue-cli脚手架创建的项目架构。在开发环境上已经可以正常运行；

喜欢ヅ旅行/ 2022年12月27日 06:28/ 0 赞/ 324 阅读

相关 VUE_vue二级路由配置

二级路由配置path时前面不能有 " / " 在一级路径信息数组中添加一个children配置项： { path:'/hot',component:()=

淩亂°似流年/ 2022年10月07日 09:48/ 0 赞/ 224 阅读

相关 IIS部署vue(history路由模式)项目

IIS部署vue(history路由模式)项目安装url rewite插件离线下载url rewiter插件 https://www.iis.

╰+哭是因爲堅強的太久メ/ 2022年10月05日 13:56/ 0 赞/ 17 阅读

相关 vue-路由精讲二级路由和三级路由的作用

1、我们继续上一个案例 vue -- 路由精讲制作导航 -- 从无到有，在 about文件夹下创建一些文件夹。如下： 2、编写about.vue代码。当我们点击导航中 “

太过爱你忘了你带给我的痛/ 2022年09月08日 13:54/ 0 赞/ 276 阅读

相关 VUE —— 9、路由（二级路由、路由拦截）、axios

目录 8.二级路由（1）路由配置（2）二级路由渲染 9.路由拦截（12）axios 1.get请求 2.post请求 3.axios全局引入（很少用，用

待我称王封你为后i/ 2022年08月31日 04:59/ 0 赞/ 354 阅读

相关 VUE —— 9、路由（二级路由、路由拦截）、axios

目录 8.二级路由（1）路由配置（2）二级路由渲染 9.路由拦截（12）axios 1.get请求 2.post请求 3.axios全局引入（很少用，用

小咪咪/ 2022年08月29日 12:54/ 0 赞/ 307 阅读

相关 react路由系列02___ 二级路由

一、经过文章“[react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][react_01_ _react_React-router]

墨蓝/ 2021年12月11日 03:49/ 0 赞/ 430 阅读

相关路由删除添加

删除 route delete 0.0.0.0 192.168.100.1 添加 route -p add 192.168.2.0 MASK 255.255.255.0

痛定思痛。/ 2021年11月23日 07:40/ 0 赞/ 357 阅读

相关 vue 路由嵌套(二级路由)

路由嵌套就是在父路由配置好后,配置一个children属性,里面放置的的内容跟routes属性下面的内容大体一样,这就是二级路由的配制方法。嵌套路由的关键字childr

青旅半醒/ 2021年07月27日 01:47/ 0 赞/ 847 阅读