在项目根目录外调用 outDir

Question

我正在使用 Vite 构建 Vue3 项目，我正在使用 Vite build.outDir 选项在 Vue3 应用程序根目录之外构建项目。这是我的项目结构，在 frontend 文件夹中，Vue3 应用程序位于：

my-app/
├─ frontend/
├─ public/
│  ├─ dist/
|  ├─ .htaccess
│  ├─ app.php

我正在尝试将 Vue3 项目构建到 my-app/public/dist/ 文件夹，我通过将 vite.config.js 中的 outDir 设置为：

来实现这一点

build: {
  outDir: '../public/dist'
},

就像那个项目是在 dist 文件夹中构建的，但是当我在浏览器中打开页面源代码时，相对于构建脚本的 URL 是不正确的：

<link rel="stylesheet" href="/assets/index.585a031a.css">

例如 /assets/index.585a031a.css 应该是 /dist/assets/index.585a031a.css。因此，我添加了另一个 Vite 选项 base 为：

base: '/dist/',

就像那样，当我转到页面源时一切正常，但问题是应用程序的 URL 从 example.com 更改为 example.com/dist。

这是我的 .htaccess 文件，但我认为它与 .htaccess 无关，因为我在 Vue2 应用程序中使用默认 Vue CLI（未使用 Vite）具有相同的设置：

# Disable directory listing
Options -Indexes
# Enable the rewrite engine
RewriteEngine On
# Sets the base URL for rewrites
RewriteBase /
# Access to domain root should serve dist folder
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^(.*)$ /dist/ [L]
# If URL doesn't match any static assets it should serve dist folder
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !/api/*
RewriteRule . /dist/ [L]
# If URL contains api it should serve app.php
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /api/*
RewriteRule .* app.php [QSA,L]

所以，主要问题是我如何仍然在 public/dist 文件夹中构建应用程序并保留应用程序 example.com 而不是 example.com/dist 的 URL？

Answer 1

问题是您的 index.html 位于 dist 文件夹中。因此 URL 需要 example.com/dist 才能为您的 index.html 服务。您可以手动将 index.html 移动到 public 文件夹，以查看它是否适用于 URL example.com.

解决方案：将您的配置更改为：

{
...
// base: '/dist/', remove base config
build: {
    outDir: '../public', // this line place index.html in the public folder
    assetsDir: './dist', // this line place your assets in the public/dist folder
  }
}

在项目根目录外调用 outDir

Vite outDir outside of the project root

.htaccess

build

vuejs2

vuejs3

vite