vite+vue3编译后打开index.html空白_plugin-legacy overrode 'build.target'. you should

场景：vite打包后，将dist包嵌入到PC客户端使用；
开发环境：vite4.0+vue3.2，node16.17.1，window 10；

问题：

• 访问的文件不存在，主要是路径配置问题；
• 打包后的文件，通过file协议无法直接打开，白屏报错跨域等一系列问题，主要是因为esModule问题；

解决方案：

因为不支持file协议，可以使用官方插件@vite/plugin-legacy；

问题1：访问的文件不存在

在 vite.config.js 文件配置

export default defineConfig({
  base: "./", 
});
1
2
3

问题2：提示跨域问题，不支持file协议

一般情况下，vite的目标浏览器需要支持原生支持 ES模块，当需要支持低版本浏览器时，需要做到向下兼容

1.安装@vite/plugin-legacy

使用 npm

npm install @@vite/plugin-legacy -D

使用 yarm

yarn add @vitejs/plugin-legacy -D

2.修改 vite.config.js 配置

• 修改build.target 构建目标为es2015,或指定浏览器版本

import legacy from "@vitejs/plugin-legacy";
export default defineConfig({
  base: "./",
  plugins: [
    legacy({
      //targets里可指定兼容到某一特定版本，默认为[ "defaults", "not IE 11"]；
      targets: ["chrome 80", "defaults", "not IE 11"], 
    }),
    vue(),
  ],
   build: {
    // 默认是modules,更改这个会去输出兼容浏览器，根据实际情况修改
    target: ["es2015", "chrome63"], 
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.修改dist/index.html文件

• 删除 type=“module” 的 script 标签类型的脚本；
• 删除 script 标签中的 nomodule 、crossorigin 属性
• 删除id为’vite-legacy-entry’的script标签里的内容，并将data-src改为src；

< script id=“vite-legacy-entry” src=“./assets/index-legacy-9289651b.js”></ script>

到此应该就没问题了，如果项目不报错了，检查下html结构，是否正常加载组件，如果没有，检查下路由文件配置的路由模式，将history模式改为hash；

脚本自动处理
为了省事，可以将index.html的处理过程，已js脚本实现，避免手动修改导致的人为错误
安装fs

npm install fs

• 新建transform.js

let fs = require("fs");

console.time("转换耗时");
const distPath = "./dist/index.html"; //打包路径的index.html
let htmlText = fs.readFileSync(distPath, "utf8");
let resultText = "";
let htmlArr = htmlText.match(/.*\n/g) || [];
htmlArr.forEach((str) => {
  str = str.replace(/\s?nomodule\s?/g, " ");
  str = str.replace(/\s?crossorigin\s?/g, " ");
  str = str.replace(/data-src/g, "src");
  if (!/type="module"/i.test(str)) resultText += str;
});
fs.writeFileSync(distPath, resultText, "utf8");
console.timeEnd("转换耗时");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 将脚本放在根目录，或者放在你想放的位置，重新打包后执行脚本

node transform.js

检查编译后的dist文件夹内，index.html的内容是否修改成功，发开index.html到浏览器检查是否正常

然后修改package.json文件，在打包后执行这个脚本，这样每次打包就不用再手动修改了；

"scripts": {
    "build": "vite build && node transform.js",
 },
1
2
3

这里要注意脚本文件的位置

到这里不放心，可以执行 npm run build 打包命令，检查是否正常

总结：

• vite生成的文件会带有module，导致存在跨域问题，大多数项目开发都是将文件放在服务器中通过域名去访问，但是特殊情况需要直接访问静态资源。所以要去解决file存在跨域的问题。
• 给引用文件设置type="module"等于给文件设置了私有作用域，xx.js文件成了单独的模块，运行在自己的私有作用域中，而不是全局作用域中。
• 虽然script标签自带跨域能力（这也是某些场合会通过jsonp结合script来请求资源的原因），但是这里的跨域是指的http协议（协议、域名、端口一致），file协议是不支持跨域的。
• es6声明type=“module”，这类使用了模块的script是受限于同源策略的。