环境
vite+ts+vue3
1、利用 vite-plugin-prerender 插件 先安装
npm i vite-plugin-prerender -D
2、.配置找到 vite.config.ts
import vitePrerender from 'vite-plugin-prerender';
const Renderer = vitePrerender.PuppeteerRenderer;
import path from 'path'
export default defineConfig({
plugins:[
vitePrerender({
// Required - The path to the vite-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Required - Routes to render.
routes: ['/', '/recruitment', '/cool'],
renderer: new Renderer({
headless: true
})
})
]
})
再实行打包代码
如果还是不显示index.html id app还是里还是没有代码
打包报这个缺点
实行 安装代码
npm add -D @vitejs/plugin-legacy --legacy-peer-deps
import legacy from "@vitejs/plugin-legacy";
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11'],
}),
]
})
安装成功后再安装
npm install terser
安装完成后再实行 打包代码 npm run build-only
之前app 里是没有代码的成功之后就有代码了
