使用Vuetify 3和Vite部署Vue.js 3应用程序(到嵌套文件夹)

Question

我使用Vue.js 3和Vuetify 3创建了一个应用程序，它使用Vite。如果我在根文件夹中部署到生产环境，它就能正常工作(即，如果我从http://example.com访问它)。但我要部署到一个名为app&quot的文件夹(即。http://example.com/app)。原因是根文件夹包含一个营销网站，我不想覆盖它。

如果有区别的话，我也用TypeScript。

我查阅了Vite文档，您可以使用以下命令更改公共路径:

vite build——base=/my/public/path/

在我的例子中，我尝试了:

vite build——base=/app/

我已经尝试过了，但是当我在"应用程序"中部署到生产环境时，它不起作用。文件夹中。我看到网页上的标题显示正确，但整个屏幕是空白的。

Answer 1

您可以尝试在vite.config.ts中设置基本路径:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: '/app/',
})

此外，您还可以检查生成的index.html，以查看包含的文件的相对文件路径是否与您期望在/app/为应用程序服务的文件路径正确匹配。

Answer 2

我使用react/vite，在我的情况下，我做了你所做的所有事情，但我也在App.js文件中更改了我的Router组件的baseurl。

<div className="App">
<Router basename="/app/">
//all routes
</Router>
</div>