时间戳

首页 > 解决方案 > 具有多个输入/输出文件的多页应用程序的 Vue/Vite 配置

vue.js - 具有多个输入/输出文件的多页应用程序的 Vue/Vite 配置

问题描述

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

我的直接结构是这样的：

/
/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

根据文档，我应该能够查看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"

我错过了什么？

标签： vue.jsvite

解决方案

您可以尝试通过以下方式重定向项目的根目录吗

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/

推荐阅读