Setting up a Vue.js 3 project with Vuetify 3 and Vite, deployed into a nested folder structure

Recently, I developed an application using Vue.js 3 and Vuetify 3 with the help of Vite. Everything was working perfectly when I deployed it to production in the main root folder (accessible through http://example.com). However, now I am faced with a challenge as I want to deploy the app to a subfolder named "app" (i.e., http://example.com/app). The reason behind this is that the root directory already contains a marketing website, and I don't want to overwrite that.

One important thing to note is that TypeScript is also being used in this project.

After going through the Vite documentation, I discovered that you can change the public path by using:

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

In my specific case, I attempted to implement this solution by running the following command:

vite build --base=/app/

Despite trying out this method, I encountered an issue when deploying to production within the "app" folder. Although the title on the webpage displays correctly, the whole screen appears blank, leaving me puzzled about how to proceed.

typescriptvue.jsvuetify.jsvite

Answer №1

If you want to set the base path, consider updating the vite.config.ts file like this:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/app/',
})

Additionally, make sure to verify the index.html to confirm that the relative paths of included files align with your expectations when serving the application at /app/.

Answer №2

In my development setup using react/vite, I followed the same steps as you did. In addition to that, I made a modification by changing the base URL of the Router component in my App.js file.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am unable to showcase the image at this time

Hey there, I'm having an issue with displaying an image stored inside the NextJS API folder. The alt attribute is showing up fine, but the actual image isn't displaying. When I console.log the image data, everything seems to be in place. Can anyo ...

javascripttypescriptnext.js

Encountered an AxiosError while sending a post request from a Vue app to a Laravel app

Seeking guidance on utilizing Axios to send a request from domain A to domain B. Domain A: test.fkbraxy.sk (Vue 3 only) Domain B: app.fkbraxy.sk (Laravel 10 only) Domain A: Route api (routes/api.php) : Route::post('post-contact', function (Req ...

laravelvue.jsaxios

Managing single sign-out with SSO using the Msal v2 library in a Node.js and Vue.js environment

The challenge: When using msal v2, logging in to the app via a Microsoft account saves parameters to the sessionStorage. Everything works perfectly until the user logs out on Office.com or any other site using Microsoft SSO. The problem arises because the ...

javascriptnode.jsvue.jsmicrosoft-graph-apiazure-ad-msal

How to apply styling to a specific portion of text within a list element using Vue.js

Despite my best efforts, I am struggling to style only the word "healthy" within the 'It is healthy!' string using computed properties, watchers, and methods in vuejs. I'm at a loss for how to achieve this unique styling. <template> ...

javascriptvue.jslistobject

Changing the animation associated with a hover action - tips and tricks!

My navigation header includes links to various websites, some of which are displayed as drop-down menus. I have implemented an animation and style change on hover to visually indicate the active link and display all available options in case of a dropdown ...

htmlcssvue.jshovercss-animations

Guide to organizing elements in an array within a separate array

Our array consists of various items: const array = [object1, object2, ...] The structure of each item is defined as follows: type Item = { id: number; title: string contact: { id: number; name: string; }; project: { id: number; n ...

javascripttypescript

Preventing me from instantiating objects

I've been struggling with an issue for a while now consider the following: export abstract class abstractClass { abstract thing(): string } export class c1 extends abstractClass { thing(): string { return "hello" } } export cla ...

typescriptclassinterfaceabstracttypeof

Unable to show date/time using v-for loop

I'm facing an issue where I want to display the datetime in a v-for loop, but it ends up showing the same time repeatedly. Is there a solution to avoid this problem? v-for loop example: <div class="location-box-container"> <ul c ...

vue.jsecmascript-6vuejs2vuejs3

What is the best way to create a versatile svelte component that can be utilized across various projects?

Currently, I am in the process of developing two distinct web applications using svelte/typescript: Site A, which serves as the public-facing front end and must be optimized for speed and efficiency Site B, the administration UI where editors manage and u ...

typescriptpackage.jsoncompositionsvelte

Tips for successfully utilizing v-html in vuejs with nuxt

What approach should I take to display components passed through props and render them using v-html? I came across a rendering solution, but I'm unsure how to implement it in a local component due to my usage of Nuxt. The code Vue.compile(this.vconten ...

vue.jsnuxt.js

What is the process for updating parameters before finalizing a route in Vue.js?

I have set up a route with a value parameter: routes.push({ name: 'test', path: '/test/:value', component: resolve(__dirname, 'src/pages/test.vue'), }); Now, I want to modify the route so that it also include ...

javascriptvue.jsvue-routernuxt.js

Switch the CSS class when clicking on a responsive table within a table

I am looking to update the background color of a row within a table when a tr is clicked. Below is the code for the table: <div class="table-responsive"> <table class="table table-hover"> <thead> ...

cssvue.jsbootstrap-vue

Utilizing styled components for retrieving JSON data with an alternate key identifier

import styled from "vue-styled-components"; const props = { type: String, action: Boolean }; const getter = () => { const permissionsList = JSON.parse(localStorage.getItem("UZ")).permissions; const type = props.type; const action = props.action; ...

javascriptvue.jsecmascript-6styled-components

Can you explain the distinction between 'bigint' in lowercase and 'BigInt'?

Currently, I am in the process of updating some TypeScript code that utilizes an external library for handling big numbers to BigInt (ES2020). However, the linter is throwing numerous errors which I find quite perplexing. https://i.sstatic.net/VnQSK.png ...

javascripttypescriptbigintecmascript-2020

Fixing the version mismatch error when attempting to create a Vue project

While attempting to create a vue project using vue create shop, I keep encountering the following error message: Error: Vue packages version mismatch: - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5838090b5c7dbc3dbc4c4" ...

vue.js

Issue with VueJs and ChartJs not displaying custom options when making an API call

Having trouble populating my chart with data from the API. Despite setting extraOptions for my chart, it defaults to default options when rendered. Here is the component code: import { Bar, mixins } from 'vue-chartjs'; export default { name: ...

javascriptvue.jschart.jsvue-chartjs

Encountering a SonarQube error message stating "Unnecessary 'undefined' should be removed" when using "undefined" as a function argument

When calling a function, I have been passing "undefined" multiple times as a parameter. However, the SonarQube report is flagging an error stating "Remove this redundant undefined". https://i.stack.imgur.com/YhOZW.png It should be noted that the function ...

javascriptnode.jstypescriptsonarqube

The local server is having trouble loading JavaScript

I've been troubleshooting a sleek menu design, and I'm puzzled by why it's not working on my localhost. It functioned perfectly when tested on this Codepen. However, after transferring the code to my localhost, it stopped functioning. I&apos ...

javascriptcssvue.js

What is the proper technique for utilizing private fields in TypeScript?

Every time I attempt to execute the code below that involves a private field, I encounter an "Invalid character" issue at the location of #. class MyClass { #x = 10; } Here is the content of my tsconfig.json file: { "compilerOptions": { ...

typescript

Mapping response data to a new type using TypeScript in Angular 2

Consider the following: userGroups: IUserGroup[]; this.service.getUserGroups().subscribe(g => this.userGroups = g); The getUserGroups function returns IUserDifferentGroup[]. However, both IUserGroup and IUserDifferentGroup share the same fields, with ...

angulartypescript