浏览器打开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 问题解决
注:此方法建议部署前做好充分测试