vue3+vite2打包后浏览器打开跨域浏览器的错误解决方法

Gask

浏览器打开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配置如下：

[JavaScript] 纯文本查看 复制代码

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 问题解决


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


解决方法三：


本地安装http-server或nginx等环境运行


*以上方法仅针对打包后本地打开问题*

EXiaoLu

赞赞赞赞

深巷丶

emmmmmm为啥要本地打开，调试也会开个本地服务器调试的啊，正式发布肯定也是放在服务器上。基本应该没有打开file://的需求吧

cyy667

可以下载一个live server插件

Gask

深巷丶 发表于 2022-11-2 11:57
emmmmmm为啥要本地打开，调试也会开个本地服务器调试的啊，正式发布肯定也是放在服务器上。基本应该没有打 ...

论坛就看到不少个这种问题了。。。