浏览器打开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 问题解决

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

# html # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue