My vue.app is not showing up on the deployed version, what could be causing this issue?

Question

My vue.app is not showing up on the deployed version, what could be causing this issue?

I'm currently facing an issue while trying to deploy my vue.js project on Github Pages. While HTML, CSS, and images are rendering perfectly, the Vue app components seem to be disappearing. It seems like the part responsible for rendering the Vue app is not working. Here is a visual representation of my directory structure: ›https://i.sstatic.net/nSD4A.png

You can also find my git repository at: https://github.com/liulian1004/test.

I would greatly appreciate any help or guidance as I am relatively new to Vue.js and this is my first attempt at deploying a Vue project. Feel free to reach out if you need more information. Thank you!

javascript git vue.js github

Answer 1

Answer №1

Because the app is not being served from the root directory, but rather from /test, you must set up the publicPath in the vue.config.js file:

module.exports = {
   publicPath: '/test/'
}

Here is an alternative approach to setting a conditional publicPath using the .env file, as outlined in the Vue CLI documentation. This method ensures proper serving of the app in both development and production environments:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/test/'
    : '/'
}

Answer 2

Because the app is not being served from the root directory, but rather from /test, you must set up the publicPath in the vue.config.js file:

module.exports = {
   publicPath: '/test/'
}

Here is an alternative approach to setting a conditional publicPath using the .env file, as outlined in the Vue CLI documentation. This method ensures proper serving of the app in both development and production environments:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/test/'
    : '/'
}

My vue.app is not showing up on the deployed version, what could be causing this issue?

Answer №1

Similar questions

What is the best way to utilize regex in converting this CSS block to LESS?

Combine two groups of elements

Searching for boolean values in MongoDB: True, false, or both?

Is there a way to determine if a div is positioned 100px from the bottom edge?

Splitting code is not being done through React's lazy import and the use of Webpack

Executing Client-Side Function Upon Data Retrieval in a Node.js Application

Issue with ThreeJs: Difficulty loading separate images on top and bottom surfaces

Looking to achieve a scroll effect with mix-blend-mode using JavaScript?

Configuring Three JS Orbit Controls

Access to property 'CKEDITOR' is unauthorized

Numerous applications collaborating on workflows within a Firebase project

The execution of 'observe' on 'MutationObserver' failed because parameter 1 is not the correct type of 'Node'. Ensure to use select2() instead

Error: The function nodemailer.createTransport is not defined or does not exist

Invoke a method on a ReactJS component class instance

How can you leverage jQuery's .load() method to preload an image without passing any arguments?

What is the best way to structure Sequelize associations?

Is there a way to transform a string property into a custom type in a TypeScript array?

What is the reason behind the code breaking when a newline is added between `return` and `(`?

Load images and audio files using jQuery AJAX prior to the page being rendered

Using PHP/JavaScript to activate a button once the timer reaches 00:00