npm install-Dvite-ssg vue-router @unhead/vue 在vite.config.ts中: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 import{defineConfig}from'vite';import{ViteSSG}from'vite-ssg';importAppfrom'./App.vue';exportconstcreateApp=V
反映到 Vue 项目的文件结构上,SPA 应用往往需要一个 router 文件来定义 vue-router 的路由和对应的组件,而 SSG 应用则可以把每个页面的路由和对应的 Vue 页面组件直接定义在一个文件夹中(往往命名为pages) 所以Vite-SSG 项目的main.js一般长这个样子: importAppfrom'./App.vue'import{ViteSSG}from'vite-ssg'i...
反映到 Vue 项目的文件结构上,SPA 应用往往需要一个 router 文件来定义 vue-router 的路由和对应的组件,而 SSG 应用则可以把每个页面的路由和对应的 Vue 页面组件直接定义在一个文件夹中(往往命名为pages) 所以Vite-SSG 项目的main.js一般长这个样子: import App from './App.vue' import { ViteSSG } from...
在2023 年的年底,我终于有时间下定决心把我的 UtilMeta 项目官网 进行翻新,主要的原因是之前的官网是用 Vue2 实现的一个 SPA 应用,对搜索引擎 SEO 很不友好,这对于介绍项目的官网来说是一个硬伤 所以在调研一圈后,我准备用 Vite-SSG + Vue3 + Vuetify3 把官网重新来过,前后花了两周左右的时间,本文记录...
所以Vite-SSG 项目的main.js一般长这个样子: import App from './App.vue' import { ViteSSG } from 'vite-ssg' import routes from '~pages'; import vuetify from './plugins/vuetify'; export const createApp = ViteSSG( App, // vue-router options {routes, scrollBehavior: () => ({ top: 0...
单纯选择用 Vue 3.0 重新开发 SPA 应用肯定会丢失 SEO,所以才有了前面的 技术栈的选择[24],本次是通过 SSG 方案来落地服务端渲染。 项目架构规划 在开始动手之前,还要对网站架构做一波规划,盲目动手只能给自己挖坑,自己的博客虽然说内容不多,但也有一些东西要考虑: ...
在2023年末，我决定改造我的UtilMeta项目官网，原因在于之前的官网采用Vue2实现的SPA应用，对搜索引擎SEO不友好，这对于项目介绍官网来说是一个严重问题。因此，我选择了Vite-SSG + Vue3 + Vuetify3来重新构建官网，耗时约两周。文章将记录开发过程中的思考和总结，重点涉及SEO优化的重要性及合适的开发...
我的网站是基于vue3开发,调研之后,决定使用vite-plugin-ssr来实现SSG,下面介绍下具体实现。 vite-plugin-ssr官网:https://vite-plugin-ssr.com/ 1.项目结构 这里建议直接使用vite-plugin-ssr提供的vue示例程序,其中已经把必要的配置都写好了,可以直接进行二开,非常方便,下面的功能介绍也主要基于这个示例展开。
单纯选择用 Vue 3.0 重新开发 SPA 应用肯定会丢失 SEO,所以才有了前面的 技术栈的选择,本次是通过 SSG 方案来落地服务端渲染。 项目架构规划 在开始动手之前,还要对网站架构做一波规划,盲目动手只能给自己挖坑,自己的博客虽然说内容不多,但也有一些东西要考虑: ...
npm i -D vite-ssgvue-router @unhead/vue // package.json { "scripts": { "dev": "vite",-"build": "vite build"+"build": "vite-ssg build"// OR if you want to use another vite config file+"build": "vite-ssg build -c another-vite.config.ts"} ...