解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白_nginx failed to load module script: expected a jav-程序员宅基地

技术标签： nginx  Vue  前端  Vite  javascript  

报错内容

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.

解决方法

router文件
// 创建路由
export const router = createRouter({
    
	// 在这里传入项目打包目录
	history: createWebHistory('/demo/'),
	routes: constantRoutes
})
vite.config.ts

在这里插入图片描述

nginx.conf

配置中路径apps是我自建的存放前端页面的文件夹
起关键作用的是try_files $uri $uri/ /demo/index.html，当然上面项目文件夹demo也需保持一致

  1. alias 后面的路径是Vue项目打包后dist静态文件服务器存放路径，一般在nginx下面建一个文件夹存放
  2. tryfiles 后面的index.html路径与创建路由和vite.config.ts配置里面的base保持一致即可，可以多级目录
  3. location 后面的路径与index.html上级目录保持一致即可

在这里插入图片描述

2023-11-28补充：在上述情况下访问项目public下的文件

1.加载图片


<el-row style="text-align: center;margin-top: 20px;">
			<el-col v-for="item in imageList" :span="8">
				<div class="demo-image__preview">
					<el-card class="box-card" style="padding: 0px;">
						<el-image style="width: 200px; height:200px" :src="item" :zoom-rate="1.2" :max-scale="7"
							:min-scale="0.2" :preview-src-list="imageList" :initial-index="4" fit="cover" />
					</el-card>
				</div>
			</el-col>
		</el-row>

// 批量获取文件夹下的图片
const imageList = ref<any>([])

onMounted(() => {
    
	// handleSelect('0', [])
	const list: any = import.meta.glob("@/assets/images/*.png", {
     eager: true })
	for (const image in list) {
    
		// console.log("image", image)
		imageList.value.push(getImgUrl(image))
	}
	
})



// 生成图片访问路径，url为public下的路径，不包括public
const getImgUrl = (url: string) => {
    
	return new URL(import.meta.env.VITE_BASE_PATH + url, import.meta.url).href
}

上述代码提到的VITE_BASE_PATH 配置在env.development和env.production里面
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/cc374c30c705496fb12abad86c9d4b9e.png
在这里插入图片描述
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42071369/article/details/128379046

智能推荐

Mybatis-plus_mybatisplus oracle-程序员宅基地

文章浏览阅读2.8k次。MyBatis-Plus（简称 MP）是一个 MyBatis 的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发提高效率而生。该框架由baomidou（苞米豆）组织开发并且开源的。_mybatisplus oracle

为什么输入法显示中文打不出中文_搜狗输入法打不出中文怎么回事 搜狗输入法在qq上打不出汉字解决办法...-程序员宅基地

文章浏览阅读979次。搜狗输入法有的时候在电脑上打不出中文的情况你有遇到过吗？想知道如何修复搜狗输入法？不妨来看看本站提供的详细教程吧！搜狗输入法打不出中文怎么回事？第一种：我们可以在搜狗输入法的“设置属性”——输入法修复器——一键修复完成；第二种：打开360卫士“电脑救援”——输入法问题——立即修复；第三种：就干脆直接卸载重新安装打开“软件管家”——软件卸载——软件大全——输入法——一键安装即可。方法一：首先把鼠标移..._搜狗输入法微信qq为啥打不出汉字

php根据两个条件查询数据,利用PHP访问数据库——实现分页功能与多条件查询功能(示例代码)...-程序员宅基地

文章浏览阅读406次。1.实现分页功能代号名称价格require_once "./DBDA.class.php";　　//加载数据库访问类的封装文件require_once "page.class.php";　　//加载分页类的封装文件$db = new DBDA();$sql = "select count(*) from car";$arr = $db->query($szts);$page = new Pa..._php双条件任意查询

duilib视频教程_Duilib教程－HelloDuilib及DuiDesigner的简单使用-程序员宅基地

文章浏览阅读246次。一、HelloDuilib1.首先理解DUILIB显示的一个基本流程，如下图：在Duilib中，WindowImplBase这个类代表了图中“CWndClass”。所以我们需要做的是：1)生成一个XML。2)生成一个WindowImplBase对象。3)加载XML。4)显示窗口。但是编写的时候，WindowImplBase已经帮我们做了许多工作，我们只需要指定XML路径，它就能够帮助我们自动..._duilib视频教程下载

python反爬虫原理与绕过实战pdf-antispider-程序员宅基地

文章浏览阅读2.1k次。antispider 为书籍《Python3 反爬虫原理与绕过实战》配套代码详细目录和封面预览本书共 10 章，除第 1 章环境安装配置外和第 3 章爬虫与反爬虫之外，其他章节涉及的 Python 代码均记录在 antispider 中。包括：第 2 章 WEB网站的构成和页面渲染第 4 章 信息校验型反爬虫第 5 章 动态渲染反爬虫第 6 章 文本混淆反爬虫第 7 章 特征识别反爬虫第 8 章 ..._python3反爬虫原理与绕过实战pdf

t3提示服务器sa修改,登陆提示可能是刚修改过SQL Server的超级用户（SA）的口令...-程序员宅基地

文章浏览阅读3.4k次。安装软件后，登录系统管理提示： SQL Server口令此提示可能由于有时sa口令遗忘或失效，也可能是环境问题所致。首先：要分析是否设置了sa口令，或者录入的sa口令是否正确，可通过命令提示符验证sa口令。〖操作步骤〗1. 在正在连接到的计算机中打开命令提示符窗口。开始—运行—输入cmd—确定2. 在命令提示符处键入以下命令：osql -U sa注意：(1)‘U’字符一定为大写(2)这样可以通过 ..._t3 sql server口令 由于sql server的超级用户口令修改过

随便推点

中山大学计算机类专业分数线,中山大学计算机类专业2016年在广东理科高考录取最低分数线...-程序员宅基地

文章浏览阅读247次。类似问题答案中山大学计算机类专业2016年在天津理科高考录取最低分数线学校 地 区 专业 年份 批次 类型 分数 中山大学 天津 计算机类 2016 一批 理科 629 学校 地 区 专业 年份 批次 类型 分数 中山大学 天津 计算机类 2016 一批 理科 629 中山大学 天津 计算机类 2015 一批 理科 643 中山大学 天津 计算机类 2015 一批 理科 643中山大学计算机类专业..._zhongshandaxue jisuanjileifenliu

matlab gui优化,matlabgui优化程序-程序员宅基地

文章浏览阅读326次。的优化工具箱提供了各种优化函数,这些优化 函数可以通过在命令行输入相应的函数名加以调用;此外 为了使用方便,MATLAB 还提供了图形界面的优化工具 (GUI Optimization ......MATLAB优化工具箱 5.1 工具箱概述 5.1.1 工具箱的功能 5.1.2 工具箱的新特色 5.1.3 工具箱的结构 5.2 工具箱函数 5.3 GUI优化工具 5.3.1 GUI......矩阵..._matlab中2022b的gui优化

工控机安装linux步骤,工控机驱动安装步骤及流程说明-程序员宅基地

文章浏览阅读1.4k次。工控机调试安装流程说明：一、 手动安装Windows XP操作系统。二、 安装主板驱动和显卡驱动。三、 安装Office2003。(根据提示进行安装)四、 安装733和724板卡驱动。五、 安装磨砂卡驱动。六、 安装打印机驱动。(根据提示进行安装)七、 安装搅拌站程序，并对软件进行调试设置。(根据提示进行安装)一、Windows XP操作系统的安装：1、 开机时常按Del键，进入CMOS环境。2、..._工控机安装linux系统

CCF201412-4 最优灌溉（80分）-程序员宅基地

文章浏览阅读52次。试题编号：201412-4试题名称：最优灌溉时间限制：1.0s内存限制：256.0MB问题描述：问题描述　　雷雷承包了很多片麦田，为了灌溉这些麦田，雷雷在第一个麦田挖了一口很深的水井，所有的麦田都从这口井来引水灌溉。　　为了灌溉，雷雷需要建立一些水渠，以连接水井和麦田，雷雷也可以利用部分麦田...

计算机导论第二周总结_开始的时候将输入符号串 从左到右依此填在纸带的第 号格子上, 其他格子保持空白(-程序员宅基地

文章浏览阅读172次。计算机导论课后总结第二周一、本周上课内容：图灵机、二、课上基础知识概念总结：第一章内容1） 图灵机i.不是真实的机器，是一种理论模型。可以视为现代数学计算机的数学模型。ii.图灵机有一个可以向左右两端无限伸展的纸带。有一个能在纸带上左右移动的读写头HEAD。还有一个控制器，存有控制规则和一个状态寄存器。2） 计算机科学的定义：i.研究计算机及其周围各种现象和规律的科学即处理信息的学..._开始的时候将输入符号串 从左到右依此填在纸带的第 号格子上, 其他格子保持空白(

myeclipse 2017 ci 10 破解包+教程（亲测已成功）_crack.bat 和 tlu文件-程序员宅基地

文章浏览阅读2.7k次。版权声明：如转载请表明出处 https://blog.csdn.net/weixin_42247720/article/details/81585837 准备工作：下载破解包：myeclipse 2017 ci 10 破解包：链接：https://pan.bai..._crack.bat 和 tlu文件

推荐文章

热门文章

相关标签