Vue3を既存のページへパーツごとに組み込む

2024.07.19 09:00

2024.07.17 09:38

Vue3をjqueryやvanillaJSのように既存のページへパーツ別に組み込んでみました。
通常の方法だと、サイト全体がVue対応になってしまいますので。

まずインストール。プロジェクトルートに移動して以下のコマンドを打ちます。
vueというディレクトリを作成し、その中にvue関連のプロジェクトを作るコマンドです。

npm init vue@latest vue

できたら、移動してインストールしましょう。

  cd vue
  npm install

これでvue内にライブラリが入りましたね。
次に既存プロジェクトに入れやすいように環境を変更します。
今回は「hoge1」と「hoge2」という独自のコンポーネントを２つ作るということにします。

まずはvue/srcの中を見てみましょう。こんな感じになっています。

/vue
|- src
  |- App.vue
  |- assets/
  |- components/
  |- main.js

これを以下のように変更します。

/vue
|- src
  |- html/
    |- hoge1.html
    |- hoge2.html
  |- hoge1/
     |- App.vue
     |- assets/
     |- components/
     |- main.js
  |- hoge2/
     |- App.vue
     |- assets/
     |- components/
     |- main.js

余計なサンプルが入っているので、いらないものを消します。
assetsとcomponentsは空にしておき、App.vueとmain.jsを以下のようにします。

<script setup>

</script>

<template>
  <div>
    hoge1
  </div>
</template>

<style scoped>

</style>

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#hoge1')

hoge1.htmlは以下のようにします。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/hoge1/main.js"></script>
  </body>
</html>

※hoge2も同じように作ってください。

次に今の変更を反映するためにvite.config.jsを変更します

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

デフォルトは上記ですが、これを以下に変更します。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      input: {
        index1: "./html/hoge1.html",
        index2: "./html/hoge2.html",
      },
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`,
      },
    },
  }
}

buildの部分を追加しています。
html/hoge1.htmlを読み込んで、assetsの中に出力しています。
これでビルドしてみます。

npm run build

すると、「dist」ディレクトリができて、その中にファイルが出力されました。

dist
  |- assets/
    |- _plugin-vue_export-helper.js
    |- index1.js
    |- index2.js
  |- favicon.ico
  |- html/
    |- hoge1.html
    |- hoge2.html

ファイルはこんな感じ。
assetsの中を公開ディレクトリにコピーし、使いたいhtmlに埋め込みます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="module" crossorigin src="assets/index1.js"></script>
  <link rel="modulepreload" crossorigin href="assets/_plugin-vue_export-helper.js">
  <link rel="stylesheet" href="assets/index1.css" type="text/css" media="all" />

  <title></title>
</head>
<body>

<div id="hoge1"></div>
<div id="hoge2"></div>

</body>
</html>

これで無事動くようになりました！

ちなみに、ビルド時の出力先を変えたい場合は「outDir」を使うようです。
こんな感じですね。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    outDir: '../public',
    rollupOptions: {
      input: {
        index1: "./html/hoge1.html",
        index2: "./html/hoge2.html",
      },
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`,
      },
    },
  },
})

今回は以上です！

Vue3を既存のページへパーツごとに組み込む

Category