[컴][웹] vue3 설치, build, 그리고 multi page app

vuejs 3 / vuejs3 / 여러 페이지 / 여러 entry

vue3 설치, build, 그리고 multi page app

Prerequisites

1. npm

설치

1. npm init vue@latest

d:\a\prog\myproj-test>npm init vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... myproj
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » Cypress
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in d:\a\prog\myproj-test\myproj...

Done. Now run:

  cd myproj
  npm install
  npm run format
  npm run dev


d:\a\prog\myproj-test>

vue3 에서 vite 로 build 할 때 import error

d:\a\prog\myproj-test>npm run build

> chips@0.0.0 build
> vite build

failed to load config from d:\a\prog\myproj-test\vite.config.js
error during build:
d:\a\prog\myproj-test\vite.config.js:1
import { fileURLToPath, URL } from 'node:url'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at _require.extensions.<computed> [as .js] (file:///d:/a/prog/myproj-test/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64459:17)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at loadConfigFromBundledFile (file:///d:/a/prog/myproj-test/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64464:21)

위와 같은 error 가 발생할 때 다음 2가지 방법이 있다.

1. vite.config.js의 이름을 vite.config.mjs로 변경 .cjs는 nodejs 가 CommonJS module 로 인식하고 .mjs 는 ECMAScript module 로 인식한다. 기본적으로 package.json 에 "type": "module" 이 없다면 CommonJS 로 인식한다.

   • Failed to load vite.config.js during build - Cannot use import statement outside a module · Issue #12923 · vitejs/vite · GitHub
   • javascript - What is the difference between .js and .mjs files? - Stack Overflow
   • ECMAScript Modules | Node.js v13.14.0 Documentation
     

2. package.json 에 "type": "module" 을 추가(이것은 node version 13 이상에서 가능)
   

   // package.json
   {
     ...
     "type": "module",
     ...
   }

d:\a\prog\myproj-test>npm run build

> chips@0.0.0 build
> vite build

vite v4.3.1 building for production...
✓ 38 modules transformed.
dist/assets/logo-277e0e97.svg    0.28 kB │ gzip:  0.20 kB
dist/index.html                  0.42 kB │ gzip:  0.28 kB
dist/assets/index-1da8cd0c.css   3.68 kB │ gzip:  1.20 kB
dist/assets/index-baba5e49.js   63.89 kB │ gzip: 25.32 kB
✓ built in 1.05s

여러 페이지 만들기

• Multi-Page App | Building for Production | Vite

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

import { resolve } from 'path'
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: {
      // https://vitejs.dev/guide/build.html#multi-page-app
      input: {
        main: resolve(__dirname, 'entry/main/index.html'),
        test: resolve(__dirname, 'entry/test/index.html'),
      },
      output: {
        // https://rollupjs.org/configuration-options/#output-dir
        dir: 'dist' // if you want to change the dist folder name
      }
    },
  },
})

vite-plugin-virtual-mpa

• GitHub - emosheeep/vite-plugin-virtual-mpa: Out-of-box MPA plugin for Vite, generate multiple files using only one template..
• 쿠...sal: [컴][웹] vue3/vite 에서 multi page app 작업
  

Reference

1. Tooling | Vue.js
2. vue.js - How to build a multi pages application by vite2 and vue3？ - Stack Overflow
3. Building for Production | Vite