将 Vite Vuejs 应用部署到 Apache 服务器

Question

我在本地计算机上使用 xampp apache 服务器。

我尝试了

npm run preview

和

serve -s dist

。它可以访问，但你必须在项目名称后面添加一个端口

localhost:3000

类似这样。

我还尝试将 dist 文件夹复制到 xampps htdocs (system_name) 中的另一个文件夹

system_name/dist

。 我想像

localhost/system_name

一样访问。当我尝试访问它时，它会出现白屏。我已经配置了

.htaccess

并仔细检查了指向 js 和 css 文件的 src 和 href。

我的 htaccess 文件也是这样的。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]
RewriteCond %{REQUEST_URI} index.html$1

有什么办法可以做到这一点吗？

Answer 1

如果您打算在

system_name

这样的子目录下提供您的应用程序，您需要配置Vite以使用公共基础路径

构建您的应用程序

如果您将项目部署在嵌套的公共路径下，只需指定 base 配置选项，所有资源路径都将相应地重写。

// vite.config.js
export default {
  base: '/system_name/',
};

然后，您可以重建应用程序，并将 dist 文件夹的

contents

复制/移动到 Apache 文档根目录中的相关位置。例如

cp -a dist/. /var/www/html/system_name/