nuxt3 env配置 打包路径设置 预渲染

env配置

env配置也可以看这篇文章 nuxt3 env文件、全局变量处理

Nuxt使用nitro，而nitro自身就支持env配置

在根目录设置.env文件就可以支持

使用process.env.xxx获取

打包路径设置

output→dir: 打包路径

output→dir→publicDir: 静态资源打包路径

output→dir-serverDir: 服务打包路径

export default defineNuxtConfig({
  nitro: {
    output: {
      publicDir: "./dist/public",
      dir: "./dist",
      serverDir: "./dist/server",
    },
  }
}

预渲染

打开预渲染后，Nuxt会将开启预渲染的页面渲染完毕后打包成.html文件，并放到静态资源目录下，当客户端请求该页面时，直接返回html文件

export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: [
        '/index',
        '/about',
        ...
      ]
    },
  }
}

设置crawlLinks为true后，nitro会从'/'或配置的routes路径开始，提取所有当前项目跳转的页面，并将这些页面也都进行预渲染

routes: 设置后，仅对routes中的页面进行预渲染

部分页面预渲染

利用routeRules配置可以实现部分页面的预渲染

export default defineNuxtConfig({
  routeRules: {
    '/home/index': {
      prerender: true // 开启预渲染
    },
    ...
  },
})

routeRules的详细使用方法见这篇文章的 4.特殊配置-路由规则

—end—