快捷導(dǎo)航

Nuxt3+ElementPlus構(gòu)建打包部署全過程

更新時間：2023年01月11日 10:11:12 作者：北極象

網(wǎng)上大部分關(guān)于Nuxt打包部署教程可謂是可以用五花八門來形容,這對于第一次接觸的朋友簡直是無從下手,這篇文章主要給大家介紹了關(guān)于Nuxt3+ElementPlus構(gòu)建打包部署的相關(guān)資料,需要的朋友可以參考下

為何選Nuxt.js?

在前后端分離出現(xiàn)之前，傳統(tǒng)的web頁面都是服務(wù)端渲染的，如JSP、PHP、Python Django，還有各種模板技術(shù)Freemarker, velocity，thymeleaf、mustache等等。其實(shí)這套技術(shù)都挺成熟的，也用了很多年。

但前后端分離出現(xiàn)后，帶來兩個好處：

工程上的分工，讓前端專門盯前端技術(shù)，開發(fā)效率上得到提升
通過各種CDN， nodejs技術(shù)，前端的性能能持續(xù)優(yōu)化，部署方式更為靈活多變，帶來更多的想象空間

vue系的Nuxt.js 和 React系的Next.js誰更勝一籌？目前我還沒有答案，貌似后者更成熟一些，但Nuxt也發(fā)展迅速。

工程package.json參考

{
  "name": "mall",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "serve": "nuxt dev",
    "preview": "nuxt preview",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxt/content": "^1.0.0",
    "@nuxtjs/pwa": "^3.3.5",
    "core-js": "^3.25.3",
    "element-plus": "^2.2.27",
    "@element-plus/icons-vue": "^2.0.10",
    "vue": "3.2.45",
    "pinia": "^2.0.14",
    "@pinia/nuxt": "^0.4.5"
  },
  "devDependencies": {
    "nuxt": "^3.0.0",
    "nuxt-windicss": "^2.5.5",
    "vite": "^3.2.4",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@iconify/vue": "^3.2.1",    
    "@vueuse/nuxt": "^8.4.2",
    "@windicss/plugin-animations": "^1.0.9",
    "sass": "^1.51.0"
  }
}

目錄結(jié)構(gòu)

約定成俗的目錄結(jié)構(gòu)：

├── app.vue # Nuxt 3 應(yīng)用程序中的主組件入口組件
├── components # 組件目錄，支持自動導(dǎo)入
├── layouts # 布局目錄
├── composables # 公共函數(shù)，支持自動導(dǎo)入
├── assets # 靜態(tài)資源目錄與vue項目的assets相同
├── middleware # 路由中間件
├── nuxt.config.ts # Nuxt 配置文件，可以理解成vue.config.js 文件名必須是nuxt.config 后綴名可以是.js,.ts或.mjs
├── package.json
├── pages # 基于文件的路由
├── plugins #插件
├── public # 不會參與打包，與vue項目的public類似直接掛在服務(wù)器的根目錄
├── README.md
├── server
├── tsconfig.json
└── yarn.lock

注意：

composables下如果有嵌套目錄，則需要在嵌套目錄下放置index.ts，再在里面export相應(yīng)對象。
components組件嵌套在目錄內(nèi)，可以用駝峰式引入，如引入components/user/avatar.vue，可以用<UserAvatar>
server目錄，下面可以有api，middleware, plugin等子目錄，api下面每個文件對應(yīng)一個restful API，好像沒法一個文件定義多個API。

頁面之間的關(guān)系

入口點(diǎn)在app.vue中:

<script setup>
import { ID_INJECTION_KEY } from "element-plus";
provide(ID_INJECTION_KEY, {
  prefix: 100,
  current: 0,
});
</script>
<template>
  <div>
    <NuxtLayout>
      <NuxtLoadingIndicator :height="5" :duration="3000" :throttle="400" />
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

通過<NuxtPage>找到layout下某個layout，可以通過名稱指定layout，缺省是layouts/default.vue：

<!--default.vue文件-->
<template>
  <main class="py-2 px-10 text-center">
    <slot />
    <Footer />
    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
      
    </div>
  </main>
</template>

然后，default.vue中的slot會被route里指定的某個page替換，默認(rèn)的page是pages/index.vue。
在page里就可以調(diào)用我們在components目錄下存放的各個組件了。

<template>
  <div>
    <Header />
    <PageWrapper>
      hello world
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const value1 = ref();
</script>
<style></style>

上面這個page用到了兩個組件：Header和PageWrapper，分別對應(yīng)components下的Header/index.vue和page/Wrapper.vue文件。

這就是從app.vue->layout->page->component的調(diào)用關(guān)系。

幾個主要命令

nuxt 啟動一個熱加載的 Web 服務(wù)器（開發(fā)模式） localhost:3000。
nuxt build 利用 webpack 編譯應(yīng)用，壓縮 JS 和 CSS 資源（發(fā)布用）。
nuxt start 以生產(chǎn)模式啟動一個 Web 服務(wù)器 (需要先執(zhí)行nuxt build)。
nuxt generate 編譯應(yīng)用，并依據(jù)路由配置生成對應(yīng)的 HTML 文件 (用于靜態(tài)站點(diǎn)的部署)。

主要參數(shù):

–config-file 或 -c: 指定 nuxt.config.js 的文件路徑。

–spa 或 -s: 禁用服務(wù)器端渲染，使用 SPA 模式

–unix-socket 或 -n: 指定 UNIX Socket 的路徑。

動態(tài)組件

使用vue中動態(tài)組件的寫法要使用resolveComponent語法:

<template>
  <div>
    <component :is="isHeader ? TheHeader : 'div'" />
  </div>
</template>
<script setup>
const isHeader = ref(1)
// 組件
const TheHeader = resolveComponent('TheHeader')
</script>

獲取后臺數(shù)據(jù)

Nuxt3 再不需要axios這個模塊了，直接采用內(nèi)置的useFetch, useLazyFetch, useAsyncData and useLazyAsyncData幾個方法。

await useFetch(() => "/my/post/url", {
        method: 'POST',
        mode: 'cors', // 允許跨域
        body: { some: true },
        initialCache: false,
        onResponse({ request, response, options }) {
    	    // Process the response data	    	 
    	},
    	
    });

也可以這么寫:

onMounted(async () => {
    const{ data, pending, error, refresh } = await useFetch(() => 'http://localhost:8888/cms/api/ebook/listall', {mode: 'cors'}, { immediate: true })
    const bookList = JSON.parse(data.value) // 注意data是一個vue的ref對象，需要.value獲得其值
    bookList.forEach(book => {
      console.log(book.bookName)
    });
})

SSR

部署 Nuxt.js 服務(wù)端渲染的應(yīng)用不能直接使用 nuxt 命令，而應(yīng)該先進(jìn)行編譯構(gòu)建，然后再啟動 Nuxt 服務(wù)，可通過以下兩個命令來完成：

nuxt build
nuxt start

打包方式

nuxt build

會為我們生成 .nuxt文件

部署

三種部署形式:

SSR渲染部署。先nuxt build，再nuxt start
靜態(tài)部署。先nuxt generate編譯成靜態(tài)文件，會生成dist 文件夾，所有靜態(tài)化后的資源文件均在其中。然后扔到nginx上
SPA部署。nuxt build --spa, 自動生成dist/文件夾，然后扔到nginx上