如何在 Vue3 中引入 Vite-SSG 打包

npm i -D vite-ssg

{
  "scripts": {
    "dev": "vite",
-   "build": "vite build"
+   "build": "vite-ssg build"

    // 想使用另外的vite配置文件，不使用原本的vite.config.ts，把build的命令改成下面这样
+   "build": "vite-ssg build -c another-vite.config.ts"
  }
}

import Home from '@/views/Home/index.vue'

// src/router/index.ts
// 这是一般的路由配置文件
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    name: 'Home',
  },
  // ...
]
const router = createRouter({
  history: createWebHistory(),
  routes
})

export default routes

import Home from '@/views/Home/index.vue'

// src/router/index.ts
// 不需要createRouter创建Vue Router实例
import { RouteRecordRaw } from 'vue-router'

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    name: 'Home',
  },
  // ...
]

// src/main.ts
import { ViteSSG } from 'vite-ssg'
import App from './App.vue'

// `export const createApp` is required instead of the original `createApp(App).mount('#app')`
export const createApp = ViteSSG(
  // the root component
  App,
  // vue-router options
  { routes },
  // function to have custom setups
  ({ app, router, routes, isClient, initialState }) => {
    // install plugins etc.
  }
)

import CommonHeader from '@/components/Global/CommonHeader.vue'
import NoList from '@/components/Global/NoList.vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { ViteSSG } from 'vite-ssg'
import App from './App.vue'
import { routes } from './router'
import './styles/index.scss'
import 'element-plus/dist/index.css'

// ViteSSG函数
export const createApp = ViteSSG(
  // 根组件
  App,
  // 路由选项
  { routes },
  // 可选的回调函数，进行更多的应用配置
  ({ app, router, initialState, isClient, onSSRAppRendered }) => {
    const whilelist = ['/login']
    // 配置路由守卫
    router.beforeEach((to, _, next) => {
      if (
        whilelist.includes(to.path)
        || (!import.meta.env.SSR && localStorage.getItem('token'))
      ) {
        next()
      }
      else {
        next('/login')
      }
    })

    // 配置状态管理
    const store = createPinia()
    store.use(piniaPluginPersistedstate)

    // 使用状态管理和路由
    app.use(store).use(router)

    // 注册全局组件
    app.component('NoList', NoList).component('CommonHeader', CommonHeader)

    // 服务端渲染时，将状态同步到客户端
    if (isClient) {
      store.state.value = initialState.pinia || {}
    }
    else {
      onSSRAppRendered(() => {
        initialState.pinia = store.state.value
      })
    }
  }
)

import path from 'node:path'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname)
  return {
    base: '/',
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    resolve: {
      // 配置路径别名@
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
    server: {
      port: env.VITE_PORT as unknown as number, // 端口号
      open: false, // 是否自动打开浏览器
    },
    // 在这里进行SSR渲染相关配置
    ssr: {
      noExternal: ['element-plus'],
    },
  }
})

import { User } from '@/api/user/types'
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: <User>{},
    isLogin: false,
  }),
  actions: {
    setUserInfo(userInfo: User) {
      this.userInfo = userInfo
    },
    setLogin(isLogin: boolean) {
      this.isLogin = isLogin
    },
    reset() {
      this.userInfo = <User>{}
      this.isLogin = false
    },
  },
  persist: true,
})

import { User } from '@/api/user/types'
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: <User>{},
    isLogin: false,
  }),
  actions: {
    setUserInfo(userInfo: User) {
      this.userInfo = userInfo
    },
    setLogin(isLogin: boolean) {
      this.isLogin = isLogin
    },
    reset() {
      this.userInfo = <User>{}
      this.isLogin = false
    },
  },
  // 如果是在浏览器端渲染，开启localStorage持久化
  persist: import.meta.env.SSR === false && {
    storage: localStorage,
  },
})

import { RouteRecordRaw } from 'vue-router'

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue'),
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home/index.vue'),
  },
  {
    path: '/articleHome/:id',
    name: 'articleHome',
    component: () => import('@/views/articleHome/index.vue'),
  },
  {
    path: '/postArticle',
    name: 'postArticle',
    component: () => import('@/views/post/index.vue'),
  },
  {
    path: '/personalCenter/:id',
    name: 'personalCenter',
    redirect: (to) => {
      return `/MyArticles/${to.params.id}`
    },
    component: () => import('@/views/personalCenter/index.vue'),
    children: [
      {
        path: '/MyArticles/:id',
        name: 'MyArticles',
        component: () =>
          import('@/components/ModelPersonalCenter/MyArticle/ArticlePost.vue'),
      },
      {
        path: '/MyCollection/:id',
        name: 'MyCollection',
        component: () =>
          import(
            '@/components/ModelPersonalCenter/MyCollection/ArticleCollection.vue'
          ),
      },
      {
        path: '/MyInfo/:id',
        name: 'MyInfo',
        component: () =>
          import('@/components/ModelPersonalCenter/MyInfo/InfoMain.vue'),
      },
      {
        path: '/MyFocus/:id',
        name: 'MyFocus',
        redirect: '/MyFocusList/:id',
        component: () =>
          import('@/components/ModelPersonalCenter/MyFocus/FocusIndex.vue'),
        children: [
          {
            path: '/MyFocusList/:id',
            name: 'MyFocusList',
            component: () =>
              import(
                '@/components/ModelPersonalCenter/MyFocus/MyFocusList.vue'
              ),
          },
          {
            path: '/MyFansList/:id',
            name: 'MyFansList',
            component: () =>
              import('@/components/ModelPersonalCenter/MyFocus/MyFansList.vue'),
          },
        ],
      },
      {
        path: '/MyData/:id',
        name: 'MyData',
        component: () =>
          import('@/components/ModelPersonalCenter/MyData/GraphInfo.vue'),
      },
    ],
  },
  {
    path: '/message',
    name: 'message',
    redirect: '/message/common',
    component: () => import('@/views/messages/index.vue'),
    children: [
      {
        path: '/message/common',
        name: 'messageCommon',
        component: () => import('@/components/ModelMessages/MessageCommon.vue'),
      },
      {
        path: '/message/users',
        name: 'messageUsers',
        component: () => import('@/components/ModelMessages/MessageUsers.vue'),
      },
      {
        path: '/message/system',
        name: 'messageSystem',
        component: () => import('@/components/ModelMessages/MessageSystem.vue'),
      },
    ],
  },
]