使用Docker搭建Nuxt3 + Vuetify + vitest环境

首先我们来做一下准备工作，最终目标是使用Docker构建Nuxt3环境。

创建Nuxt3 项目

使用官方提供的安装方法：

npx nuxi@latest init <project-name>
//安装vitest相关的
npm i --save-dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core

安装Vuetify

npm i -D vuetify vite-plugin-vuetify
//安装图标
npm i @mdi/font

在项目配置文件nuxt.config.ts中配置vuetify和vite：

//nuxt.config.ts
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineNuxtConfig({
  //...
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
    //...
  ],
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
})

• build：在构建配置中，transpile选项是一个包含字符串或正则表达式的数组，用于指定哪些依赖需要通过Babel进行转译。这里列出了”vuetify”，所以Nuxt.js会确保在构建过程中转译vuetify。

• modules:modules配置项允许你将Nuxt.js模块添加到你的应用中，以增加应用的功能。在这里，创建了一个函数模块，具有两个参数：一个是模块的选项，另一个是Nuxt.js实例。这个函数使用Nuxt.js的钩子系统在vite配置中添加vuetify插件。autoImport: true设置让vuetify插件自动导入需要的组件。

• vite:{ vue: { template: { transformAssetUrls, }, }, },这部分是针对vite的配置，特别是对Vue框架的配置。transformAssetUrls是一个列表，指定哪些HTML标签和属性应被视作需要转译的资源URL。默认地，vite已内置了一个列表，包括了常见的Vue指令，这里是在扩展这个列表。

创建vuetify.ts插件

在项目目录下面创建一个plugins目录，创建vuetify.ts插件。

// import this after install `@mdi/font` package
import '@mdi/font/css/materialdesignicons.css'

import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default defineNuxtPlugin((app) => {
  const vuetify = createVuetify({
    // ...你的配置
  })
  app.vueApp.use(vuetify)
})

现在就可以使用vuetify的相关组件了。

vitest

如果没有vitest.config.ts文件，则手动创建一个，然后配置以下代码：

//vitest.config.ts
/// <reference types="vitest" />

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [Vue()],
  test: {
    globals: true,
    environment: "happy-dom",
  },
});

测试

现在来创建几个用来测试的文件：

• components/HelloWorld.vue

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script lang="ts" setup>
defineProps<{
  name: string;
}>();
</script>

• app.vue

<template>
  <div style="padding: 30px">
    <HelloWorld :name="name" />
    <p>
      <input type="text" v-model="name" />
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const name = ref("World");
</script>

• 测试文件~/tests/components/HelloWorld.spec.ts

import { describe, test, expect } from "vitest";
import { mount } from "@vue/test-utils";
import HelloWorld from "../../components/HelloWorld.vue";

describe("HelloWorld", () => {
    test("显示的内容", () => {
        const wrapper = mount(HelloWorld, {
            props: {
                name: "World",
            },
        });
        expect(wrapper.text()).toContain("Hello, World!");
    });
});

• 执行npx vitest命令 然后执行npx vitest命令，如果出现”passed”，则表示完成！

package.json

来检查一下package.jso文件:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@mdi/font": "^7.4.47",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "install": "^0.13.0",
    "nuxt": "^3.11.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@nuxt/test-utils": "^3.12.1",
    "@vue/test-utils": "^2.4.6",
    "happy-dom": "^14.10.1",
    "playwright-core": "^1.44.0",
    "vite-plugin-vuetify": "^2.0.3",
    "vitest": "^1.6.0",
    "vuetify": "^3.6.4"
  }
}

Docker配置

• 创建Dockerfile

在项目的根目录中，创建一个新的文件并命名为”Dockerfile”，使用Node.js作为基础镜像：

//Dockerfile

FROM node:20

WORKDIR /TestNuxt3 # 创建的项目文件夹名称

ENV PATH /TestNuxt3/node_modules/.bin:$PATH

COPY ./TestNuxt3/package*.json ./

# clean 如果不进行清理，安装的包将过多导致超时
RUN npm cache clean --force && 
    npm install -g npm@latest && 
    npm install

• 创建一个docker-compose.yml文件

在项目的根目录下创建一个docker-compose.yml文件，可以方便的启动、停止和重建服务。

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - ./TestNuxt3:/TestNuxt3 
      - /TestNuxt3/node_modules 
    working_dir: /TestNuxt3 
    ports:
      - "127.0.0.1:3000:3000" 

• 执行

在包含 docker-compose.yml 的目录中执行以下命令:

docker compose build
docker compose up -d

注意: 确保已经安装了Docker和Docker Compose，在项目的根目录下运行docker compose up，Docker将会下载需要的镜像，然后构建你的镜像并运行。

在容器内部执行以下命令:

npm run dev

完成！！