解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

报错内容

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

解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白,Vue,Vite,nginx,javascript,前端

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上级目录保持一致即可

解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白,Vue,Vite,nginx,javascript,前端

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里面
解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白,Vue,Vite,nginx,javascript,前端
![在这里插入图片描述](https://img-blog.csdnimg.cn/cc374c30c705496fb12abad86c9d4b9e.png
文章来源地址https://www.toymoban.com/news/detail-515910.html