需求：在 vue3+vite 项目中，打包获得 dist 文件后，直接在本地浏览器打开运行（无需部署到服务器查看效果）

Vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行，build 打包后双击 index.html 直接以 file 协议运行网站（资源、接口等正常访问，和部署到服务器运行效果一样）

把打包后的文件放进nginx里面打开页面没有报错，但是直接打开index.html控制台会报以下错误。

Access to script at 'file:///D:/lily/LED%E5%90%8C%E6%AD%A5%E6%98%BE%E7%A4%BA/LEDSyncDisplay/dist/assets/index-gtuYsj4q.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
index-gtuYsj4q.js:1   
Failed to load resource: net::ERR_FAILED

index.html:1 Access to CSS stylesheet at 'file:///D:/lily/LED%E5%90%8C%E6%AD%A5%E6%98%BE%E7%A4%BA/LEDSyncDisplay/dist/assets/index-84oY4TON.css' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
index-84oY4TON.css:1 
Failed to load resource: net::ERR_FAILED

打包后的资源（js、css、图片等）加载路径（相对路径./）没有错，项目的vite.config.js配置如下：

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


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: './',
  server:{
    proxy:{
       '/tuyou':{
           target:"http://192.168.1.99:8091", //跨域地址
           changeOrigin:true, //支持跨域
           rewrite:(path) => path.replace(/^\/tuyou/, "/tuyou")//重写路径,替换/api
       }
    }
  },
  resolve: {
    // 设置文件./src路径为 @
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, './src')
      }
    ]
  },
  
})

点开控制台错误发现是因为打包后的index.html文件里面多了crossorigin

方案一： 直接改：type="module" crossorigin 替换为defer - 多个vue文件就不好使了。

方案二：

index.html:1 Access to script at 'file:///D:/assets/index-rl9xCX--.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

也就是说：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、chrom-untrusted、https。

　　很奇怪，为什么之前使用 vue-cli 之类时，没有遇到这样的问题呢？那么就看看原因和如何解决吧。

（1）原因：vite 是使用 type=“module” 来进行引入的。

　　可以看这篇文章：《解决Cross origin requests are only supported for protocol schemes的三种办法》blog.csdn.net/chenmoupeng…

　　即：在一个js文件里面导入其他js文件的时候在标签里面加入了type=“module”

<script type="module" src="/src/main.js"></script>

但是这样做本身是没什么问题的啊，使用es6语法，在其中一个js文件里面导入其他文件的内容是用的 import …from…

　　后来再经过研究终于发现了问题所在，其实问题就是浏览器在访问本地js文件的时候遇到了跨域的问题，我们这种引入方式属于file协议，但是上面的报错信息提示是：Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

　　其实翻译成人话就是，本地跨域仅支持ajax跨域只支持这些协议框架：http,https,data,chrome（Chrome浏览器）,chrome-extension（Chrome扩展插件），chrome-extension-resource（Chrome扩展资源），就是没有file协议!用了jsonp这种跨域json数据交互协议也没有，人家ajax就只支持那几个协议，并且jsonp交互协议也非官方正式的。

　　所以我们只要顺着这个思路解决就好了。

（2）如何解决：对于windows来说，找到chrome的快捷方式，在属性–>目标里面添加下面这行就可以了

 --allow-file-access-from-files
//注意前面有空格 

然后需要注意的是：得双击浏览器快捷方式先打开浏览器，再从 dist 目录下 index.html 点击进入才可以。直接从 dist 目录下 index.html 点击还是不行的。