vue.js 多页面开发

// webpack.config.js
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html',
title: '首页',
},
about: {
entry: 'src/pages/about/main.js',
template: 'public/about.html',
filename: 'about.html',
title: '关于我们',
},
},
outputDir: 'dist',
configureWebpack: {
plugins: [
new VueLoaderPlugin(),
],
},
};

src/
└── pages/
    ├── index/
    │   ├── main.js
    │   └── App.vue
    └── about/
        ├── main.js
        └── App.vue

// src/pages/index/main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

// webpack.config.js
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},