處理打包之后不能直接訪問(wèn)的問(wèn)題

安裝

npm install @vitejs/plugin-legacy

配置 vite.config.js

import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
...
  base: './',
  plugins: [vue(), legacy({ targets: ['defaults', 'not IE 11'] })],
})

在vite.config.js 同級(jí)目錄下創(chuàng)建toFile.mjs (用于替換module等關(guān)鍵詞，省的每次得手動(dòng)刪除)

import fs from 'fs'
console.time('轉(zhuǎn)換耗時(shí)')
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('轉(zhuǎn)換耗時(shí)')

package.json命令改為：

"build": "vite build && node toFile.mjs",

再次打包就可以了。

npm run build