Vite outDir outside of the project root-CodePudding

I am building Vue3 project with Vite and I am using Vite build.outDir option to build the project outside of the Vue3 app root. This is my project structure, where in the frontend folder is located Vue3 application:

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

I am trying to build Vue3 project to my-app/public/dist/ folder and I have achieved that by setting outDir in vite.config.js to:

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

Like that project is builded in the dist folder, but then when I open page source in the browser, relative URL to the builded script is not correct:

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

For example instead of /assets/index.585a031a.css should be /dist/assets/index.585a031a.css. Because of that I have added another Vite option base to be:

base: '/dist/',

Like that when I go to page source everything works fine, but the problem is that URL of the application is change from example.com to example.com/dist.

This is my .htaccess file, but I think it is not related with .htaccess, because I have same settings in Vue2 application with default Vue CLI (Vite is not used):

# 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/$1 [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/$1 [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]

So, the main problem is how can I still build app in the public/dist folder and keep the URL of the application example.com instead of example.com/dist?

CodePudding user response：

The problem is that your index.html is placed inside the dist folder. So the URL needs to be example.com/dist to serve your index.html. You can manually move your index.html to the public folder to see if it will work with the URL example.com.

Solution: change your config to:

{
...
// 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
  }
}