如何用Vue CLI 3构建两个独立Vue应用并生成分离打包产物

嘿，我来帮你搞定这个多入口Vue项目的配置！你的需求很明确——两个独立Vue应用共享组件，分别部署到Express的不同路由，同时支持开发服务器的多路径访问和打包后分目录存放。咱们一步步来完善配置：

1. 确认目录结构 #

先确保你的目录结构和预期一致，这样后续配置才能正常工作：

my-app/
 +- node_modules/
 +- dist/
 |  +- admin/       # admin应用打包产物
 |  +- public/      # public应用打包产物
 +- src/
 |  +- components/  # 共享组件目录
 |  +- admin/
 |     +- index.js  # admin入口文件
 |     +- router/   # admin路由
 |     +- store/    # admin状态管理
 |     +- App.vue   # admin根组件
 |  +- public/
 |     +- index.js  # public入口文件
 |     +- router/   # public路由
 |     +- store/    # public状态管理
 |     +- App.vue   # public根组件
 +- vue.config.js   # 核心配置文件
 +- ...

2. 完善vue.config.js配置 #

你已经有了基础的入口配置，但还需要补充输出路径、HTML模板生成、开发服务器路由 fallback这些关键部分。替换你的vue.config.js为以下内容：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 开发环境的基础路径，确保静态资源加载正常
  publicPath: '/',
  chainWebpack: config => {
    // 删除默认的app入口
    config.entryPoints.delete('app');

    // 添加两个自定义入口
    config.entry('admin')
      .add('./src/admin/index.js')
      .end()
      .entry('public')
      .add('./src/public/index.js')
      .end();

    // 配置输出规则：将每个入口的打包文件输出到对应子目录
    config.output
      .filename('[name]/js/[name].[hash:8].js')
      .chunkFilename('[name]/js/[id].[hash:8].js');

    // 移除默认的html插件，为每个入口生成独立的HTML文件
    config.plugins.delete('html');
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');

    // 为admin应用生成HTML
    config.plugin('html-admin')
      .use(HtmlWebpackPlugin, [{
        filename: 'admin/index.html',
        template: 'public/index.html', // 用根目录的public/index.html当模板
        chunks: ['admin', 'chunk-vendors', 'chunk-common'],
        inject: true
      }]);

    // 为public应用生成HTML
    config.plugin('html-public')
      .use(HtmlWebpackPlugin, [{
        filename: 'public/index.html',
        template: 'public/index.html',
        chunks: ['public', 'chunk-vendors', 'chunk-common'],
        inject: true
      }]);
  },
  devServer: {
    // 配置SPA路由 fallback，确保刷新页面时路由正常
    historyApiFallback: {
      rewrites: [
        { from: /^\/admin\/.*$/, to: '/admin/index.html' },
        { from: /^\/public\/.*$/, to: '/public/index.html' }
      ]
    },
    // 可选：启动开发服务器时不自动打开浏览器（避免纠结打开哪个路径）
    open: false
  }
};

配置说明： #

• 多入口设置：删除默认的app入口，添加admin和public两个入口，分别指向各自的index.js。
• 输出路径：通过output.filename和chunkFilename指定打包后的JS文件存放在对应入口的js子目录，方便区分。
• HTML模板：移除默认的HTML插件，为每个入口生成独立的index.html，并指定输出到对应子目录，确保打包后目录结构清晰。
• 开发服务器：配置historyApiFallback的重写规则，保证Vue路由在刷新页面时能正确加载对应的入口HTML，避免404。

3. 共享组件的使用 #

因为共享组件放在src/components目录下，你可以在admin或public的组件中直接通过相对路径或别名导入：

// admin/src/components/SomePage.vue
import SharedButton from '@/components/SharedButton.vue';

这里的@是Vue CLI默认配置的src目录别名，直接用它就能轻松引用共享组件。

4. 开发与打包测试 #

• 开发模式：运行npm run serve后，你可以分别访问：
  • http://localhost:8080/admin（admin应用）
  • http://localhost:8080/public（public应用）
    两个应用的路由和状态管理都是独立的，但共享组件能正常复用。
• 生产打包：运行npm run build后，dist目录下会生成admin和public两个子目录，各自包含完整的应用文件，直接部署到Express即可。

5. Express部署配置 #

最后，在你的Express应用中配置静态资源和路由 fallback：

const express = require('express');
const path = require('path');
const app = express();

// 托管静态资源
app.use('/admin', express.static(path.join(__dirname, 'dist/admin')));
app.use('/public', express.static(path.join(__dirname, 'dist/public')));

// 处理SPA路由，刷新时返回对应入口的HTML
app.get('/admin/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/admin/index.html'));
});

app.get('/public/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/public/index.html'));
});

app.listen(3000, () => {
  console.log('Express server running on port 3000');
});

这样配置后，访问http://your-domain/admin和http://your-domain/public就能分别加载两个独立的Vue应用了！

内容的提问来源于stack exchange，提问作者Alexander Savenko