vite2+vue3打包后浏览器打开跨域浏览器的错误

浏览器打开html.index ：

 Access to script at 'file:///D:/hehai/viteObj/dist/assets/index.559fd86e.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

Vite 为没有传统模块系统设计，模块是其特性推荐。

或者，你可以在应用内部署一个自定义方案来使用这个嵌入页面（example-app://什么的），这样可以正常激活 ES Modules 特性，从规避问题开始。

解决方法一：

在VScode内安装Live Server插件

 配置 vite.config.ts

 打包好html.index后点击VSode 下的Go Live启动服务

 启动后默认5500端口 http://127.0.0.1:5500/dist/index.html

解决方法二：

@vitejs/plugin-legacy 43利用@vitejs/plugin-legacy 43生成没有模块的版本

vite.config.ts配置如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
	base: './',
	plugins: [
		vue(),
		legacy({
			targets: ['ie>=11'],
			additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
		}),
	],
});

对打包后的index.html进行处理

• 去除<script type=module>元素
• 除去其他<script>的nomodule属性
• 移除<script id=vite-legacy-entry>元素的内容，并将data-src属性名改为src
• 移除 <script id=vite-legacy-entry></script>内的代码
• 将所有资源地址修改为相对地址（例如/assets/index-legacy.xxxx.js改为./assets/index-legacy.xxxx.js注意，还有 CSS 文件）

 

 直接浏览器打开index.html 问题解决

 注：此方法建议部署前做好充分测试