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

报错内容

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也需保持一致

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

本文链接：https://blog.csdn.net/qq_42071369/article/details/128379046

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

FX3/CX3 JLINK 调试_ezusbsuite_qsg.pdf-程序员宅基地

文章浏览阅读2.1k次。FX3 JLINK调试是一个有些麻烦的事情，经常有些莫名其妙的问题。设置参见 c:\Program Files (x86)\Cypress\EZ-USB FX3 SDK\1.3\doc\firmware 下的 EzUsbSuite_UG.pdf 文档。常见问题： 1.装了多个版本的jlink，使用了未注册或不适当的版本选择一个正确的版本。JLinkARM_V408l，JLinkA_ezusbsuite_qsg.pdf

用openGL+QT简单实现二进制stl文件读取显示并通过鼠标旋转缩放_qopengl如何鼠标控制旋转-程序员宅基地

文章浏览阅读2.6k次。** 本文仅通过用openGL+QT简单实现二进制stl文件读取显示并通过鼠标旋转缩放，是比较入门的级别，由于个人能力有限，新手级别，所以未能施加光影灯光等操作，未能让显示的stl文件更加真实。****效果图：**1. main.cpp```cpp#include "widget.h"#include <QApplication>int main(int argc, char *argv[]){ QApplication a(argc, argv); _qopengl如何鼠标控制旋转

刘焕勇&王昊奋｜ChatGPT对知识图谱的影响讨论实录-程序员宅基地

文章浏览阅读943次，点赞22次，收藏19次。以大规模预训练语言模型为基础的chatgpt成功出圈，在近几日已经给人工智能板块带来了多次涨停，这足够说明这一风口的到来。而作为曾经的风口“知识图谱”而言，如何找到其与chatgpt之间的区别，找好自身的定位显得尤为重要。形式化知识和参数化知识在表现形式上一直都是大家考虑的问题，两种技术都应该有自己的定位与价值所在。知识图谱构建往往是抽取式的，而且往往包含一系列知识冲突检测、消解过程，整个过程都能溯源。以这样的知识作为输入，能在相当程度上解决当前ChatGPT的事实谬误问题，并具有可解释性。

如何实现tomcat的热部署_tomcat热部署-程序员宅基地

文章浏览阅读1.3k次。最重要的一点，一定是degbug的方式启动，不然热部署不会生效，注意，注意！_tomcat热部署

用HTML5做一个个人网站，此文仅展示个人主页界面。内附源代码下载地址_个人主页源码-程序员宅基地

文章浏览阅读10w+次，点赞56次，收藏482次。html5 ，用css去修饰自己的个人主页代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xh..._个人主页源码

程序员公开上班摸鱼神器！有了它，老板都不好意思打扰你！-程序员宅基地

文章浏览阅读201次。开发者（KaiFaX）面向全栈工程师的开发者专注于前端、Java/Python/Go/PHP的技术社区来源：开源最前线链接：https://github.com/svenstaro/gen..._程序员怎么上班摸鱼

随便推点

UG\NX二次开发改变Block UI界面的尺寸_ug二次开发调整对话框大小-程序员宅基地

文章浏览阅读1.3k次。改变Block UI界面的尺寸_ug二次开发调整对话框大小

基于深度学习的股票预测（完整版，有代码）_基于深度学习的股票操纵识别研究python代码-程序员宅基地

文章浏览阅读1.3w次，点赞18次，收藏291次。基于深度学习的股票预测数据获取数据转换LSTM模型搭建训练模型预测结果数据获取采用tushare的数据接口（不知道tushare的筒子们自行百度一下，简而言之其免费提供各类金融数据 , 助力智能投资与创新型投资。）python可以直接使用pip安装tushare!pip install tushareCollecting tushare Downloading https://files.pythonhosted.org/packages/17/76/dc6784a1c07ec040e74_基于深度学习的股票操纵识别研究python代码