vite脚手架 SSG构建静态网站步骤，供SEO搜索

1.npm i  vite-ssg  -D

   npm i  vite-plugin-pages -D //读取文件夹生成路由，不用自己再去定义路由

   npm i unplugin-vue-components -D //加载自定义组件和按需加载第三方组件库

   npm i vite-plugin-vue-layouts -D //路由页面布局模板

2.main.js中引入

import { ViteSSG } from 'vite-ssg'

import { setupLayouts } from 'virtual:generated-layouts'

import generatedRoutes from '~pages'// page目录下为所放的路由页面

const routes = setupLayouts(generatedRoutes)

 

export const createApp = ViteSSG(App, { routes }, ({ app }) => {

  //进行其他组件的注册

  app.use() 

})

3.vite.config.js中配置

import VitePages from 'vite-plugin-pages'

import Layouts from 'vite-plugin-vue-layouts'

import Components from 'unplugin-vue-components/vite'

export default ({ mode }) => {

  return defineConfig({

    plugins: [

      VitePages(),

      Layouts(),

      Components({

        extensions: ['vue'],

        dts: true,

      }),

    ],

    ssgOptions: {

      script: 'async',

      formatting: 'minify',

      format: 'cjs',

    }, 

  })

}

4.打包时问题及注意事项

 1）SyntaxError: Cannot use import statement outside a module  //第三方组件库引入编译错误，无法识别样式引入无法识别import，暂时在vite构建时未找到解决方案，

最后通过将第三方库都引入，app.use(),组件样式通过在html中cdn的方式引入

 2）layout布局使用方式

  

<route lang="yaml">

meta:

  layout: default //默认为default，其他的自己去定义

</route>

3）参考项目链接

https://github.com/antfu/vitesse