具有多个输入/输出文件的多页应用程序的 Vue/Vite 配置答案

【问题标题】：Vue/Vite config for multipage app with multiple entry/output files具有多个输入/输出文件的多页应用程序的 Vue/Vite 配置
【发布时间】：2021-11-02 18:12:30
【问题描述】：

我需要将 Vue/Vite 配置为接受多个输入文件并为每个输入文件生成一个输出包。每个包本质上是一个不同的路由和视图，它们使用相同的组件、样式、数据模型、支持服务（例如 api、auth）等。

My direct 的结构如下：

/
/src
>>> customer portal
/src/portal/
/src/portal/index.html
/src/portal/app.vue

>>> admin dashboard
/src/admin/
/src/admin/index.html
/src/admin/app.vue
/src/admin/app.js

According to the docs，我应该可以查看localhost:8000/portal 或localhost:8000/admin，我应该可以看到捆绑包……但我没有。我得到一个 404。

从控制台：

>>> request
GET /portal/# HTTP/1.1
Host: localhost:8000 
>>> response
HTTP/1.1 404 Not Found

根据文档，这个简单的嵌套应该可以作为嵌套路径在 dev 上正常使用，我不需要对 vite.config.js 做任何事情。

Package.json 是：

"vue": "^2.6.11"
"vue-router": "^3.5.1"
"vuex": "^3.6.2"
"vite": "^2.3.4"
"vite-plugin-pug": "^0.3.0"
"vite-plugin-vue2": "^1.5.1"

我错过了什么？

【问题讨论】：

你能解决这个问题吗？我有类似的问题，我只需要从我的 2 个输入中获取 2 个输出文件，没有供应商
不，我还没有修复它。我还在做这个项目，这个问题暂时搁置了。如果/当我有解决方案时会回复。然而，我想要一些更优雅的东西，之前已经建议过。
有什么消息吗？干杯

标签： vue.js vite

【解决方案1】：

你可以尝试重定向你的项目的根目录

const root = resolve(__dirname, 'src');
// once root been changed, the outDir changes too
const outDir = resolve(__dirname, 'dist');

export default defineConfig({
  root,
  ...
  build: {
    outDir,
    rollupOptions: {
      input: {
         'name': resolve(root, name, 'index.html')
         ...
      },
    }
  },
  plugins: [react(), vue()]
})

我以为您的根目录位于 /，但多个条目位于 /src，

你试试localhost:3000/src/portal/应该没问题

【讨论】：