vue3+vite2打包后浏览器打开跨域浏览器的错误解决方法
浏览器打开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 问题解决
注：此方法建议部署前做好充分测试
解决方法三：
本地安装http-server或nginx等环境运行
*以上方法仅针对打包后本地打开问题* 赞赞赞赞 emmmmmm为啥要本地打开，调试也会开个本地服务器调试的啊，正式发布肯定也是放在服务器上。基本应该没有打开file://的需求吧 可以下载一个live server插件 深巷丶 发表于 2022-11-2 11:57
emmmmmm为啥要本地打开，调试也会开个本地服务器调试的啊，正式发布肯定也是放在服务器上。基本应该没有打 ...
论坛就看到不少个这种问题了。。。
页:
[1]