处理打包之后不能直接访问的问题
安装
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 同级目录下创建toFile.mjs (用于替换module等关键词，省的每次得手动删除)
import fs from '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('转换耗时')
package.json命令改为：
"build": "vite build && node toFile.mjs",
再次打包就可以了。
npm run build
