部落格Nuxt 2升級Nuxt 3（二）：基本架構與設定值
4 min前端筆記
在抽換 UI 框架之後，接下來就開始真正的升級之旅了。參考官方的升級指南，第一步就是先修改設定值。
非模組的設定值
那麼，首先從原本的nuxt.config.js中轉移非模組的設定值。
基本設定
網站用到的基本設定值不多，變動也不大，就一起整理在這邊。雖然官方有 Upgrade Guide 可以看，但有些設定值沒有提到，我最終還是打開兩個版本的文件自己去對應起來。
export default defineNuxtConfig({
/* Nuxt 3 只要直接使用generate指令就可以了，不用指定target。 */
// target: 'static',
/* Nuxt 3 若使用Vite預設就是modern build，不須額外指定。 */
// modern: 'client',
/* Nuxt 3 預設會自動解析components/資料夾下的元件 */
// components: true,
/* publicRuntimeConfig要改用runtimeConfig.public */
// publicRuntimeConfig: {},
runtimeConfig: {
public: {},
},
/* router.base要改成app.baseURL */
// router: {
// base,
// },
app: {
baseURL,
},
/* 原本的static可以選擇改名成public或是於設定值中指定，這邊保留資料夾名稱並設定。 */
dir: {
public: 'static',
},
/* global css直接平移即可 */
css: [
// SCSS file in the project
'~/assets/css/main.scss',
],
/* 原本的style-resources模組可透過vite內建功能完成 */
// styleResources: {
// // your settings here
// scss: ['~/assets/css/custom.scss'],
// // hoistUseStatements: true // Hoists the "@use" imports. Applies only to "sass", "scss" and "less". Default: false.
// },
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData(source: string, fp: string) {
// 由於這個設定值也會影響編譯scss檔案，需要排除。
return fp.endsWith('scss')
? source
: `@import "~/assets/css/custom.module.scss"; ${source}`
},
},
},
},
},
/* 原本Webpack中的extractCSS對應的設定是將features.inlineStyles設為false */
// build: {
// extractCSS: true,
// },
features: {
inlineStyles: false,
},
})
Head 設定
這部份也沒什麼太大差異，網站有用到的部份除了原本 Nuxt 2 中的head移到 Nuxt 3 之後要用app包起來以外，就是 meta 標籤的hid要改成使用key。
export default defineNuxtConfig({
// head: {
// meta: [{ hid: 'charset', charset: 'utf-8' }],
// },
app: {
head: {
/* 一些其他的設定值 */
meta: [{ key: 'charset', charset: 'utf-8' }],
},
},
})
app.html → app.vue
Nuxt 2 有一個可自訂的app.html檔案，如果要簡單新增一些靜態檔案，可以透過直接新增並編輯這個檔案來完成，但 Nuxt3 之後只有app.vue可以使用，要稍微調整一下。
GTM / Google Analytics
第一個通常會用到這檔案的功能就是第三方的數據分析了，這個可以直接使用設定值中的app.head來處理：
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
app: {
head: {
script: [
{
async: true,
src: 'https://www.googletagmanager.com/gtag/js?id=G-ABCDEFGHI1',
// 設定script優先順序以滿足GTM設置的要求
tagPriority: 'critical',
},
{
innerHTML: `window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'G-ABCDEFGHI1')`,
// 設定script優先順序以滿足GTM設置的要求
tagPriority: 'critical',
},
],
},
},
})
額外的元素
自己還有用到的就是之前《解決底部Sticky元素在Android Chrome滾動時渲染位置錯誤的問題》提到的解決辦法：在body之下新增一個<div style="position: fixed;"></div>。這個在app.vue中可以直接透過<Teleport />元件來處理：
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<Teleport to="body">
<!-- 解決底部sticky問題 -->
<div style="position: fixed"></div>
</Teleport>
</template>
