初始化
提示
如果已经有完整项目可略过此步骤
运行命令：
bash
pnpm create cloudflare@latest my-vue-app --framework=vue随后我们就得到了一个cloudflare worker与vue的混合项目
配置vite-ssg
首先按照正常步骤配置vite-ssg
具体见vite-ssg文档
安装vite-ssg
bash
pnpm i -D vite-ssg vue-router @unhead/vue修改src/main.ts
ts
import './assets/main.css'
import App from './App.vue'
import { createApp } from 'vue'
import router from './router'
import { ViteSSG } from 'vite-ssg'
import routes from './router'
const app = createApp(App)
app.use(router).mount('#app')
export const createApp = ViteSSG(
App,
{ routes },
({ app, router, routes, initialState }) => {
// 自定义
},
) 修改src/router.ts
ts
const routes = [
{
path: '/',
name: 'home',
component: () => import('../views/HomeView.vue'),
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
]
export default routes修改package.json
json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"build": "vite build && vite-ssg build --config vite-ssg.config.ts"
}
}兼容@cloudflare/vite-plugin插件
复制vite.config.ts到vite-ssg.config.ts
随后修改vite-ssg.config.ts
ts
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
cloudflare()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
server: {
host: '0.0.0.0',
allowedHosts: ['.cnb.run'],
watch: {
ignored: ['**/.pnpm-store/**']
}
},
build: {
outDir: 'dist/client'
},
})All done!!!
到这里，项目的修改就完成了
运行pnpm run build，即可生成静态文件
原理
vite原本构建，会将构建后的HTML等文件放置在dist目录下
vite原本构建生成的目录结构：
bash
dist
├── index.html
├── favicon.ico
└── assets
├── xxx.css
└── xxx.js@cloudflare/vite-plugin由于需要同时部署worker与静态文件，所以会将构建后的文件放置在dist/client目录下，worker的构建会放置在dist/项目名称目录下
配置了@cloudflare/vite-plugin插件后，构建生成的目录结构：
bash
dist
├── this_vue_app
│ ├── wrangler.json
│ └── index.js
└── client
├── index.html
├── favicon.ico
└── assets
├── xxx.css
└── xxx.js所以，这时候，vite-ssg在构建时就会因为路径错误而报错
解决方案十分简单————只需要先用原版vite构建一次，然后再用vite-ssg在dist/client目录下构建一次即可 😉 😉
求赞助QWQ
- 本文链接：https://zecrimp.top/posts/cloudflare-use-vite-ssg
- 版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 许可协议。
