I need help getting my Vue.JS project to function properly when it is deployed on a server

After creating a new VueJS project using the Vue UI, I noticed that everything runs smoothly locally at http://localhost:8080/ with no errors. However, when I build the project and upload the files from the dist folder to my hosting package via FTP, I end up with a blank HTML page. The source code on the hosted version looks different from what's on my local host.

I've tested this on two different hosting packages and encountered the same issue. Any assistance would be greatly appreciated.

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->
    <link href=/css/app.deed7380.css rel=preload as=style>
    <link href=/js/app.1e49a2f5.js rel=preload as=script>
    <link href=/js/chunk-vendors.0e42f062.js rel=preload as=script>
    <link href=/css/app.deed7380.css rel=stylesheet>
    <link rel=icon type=image/png sizes=32x32 href=/img/icons/favicon-32x32.png>
    <link rel=icon type=image/png sizes=16x16 href=/img/icons/favicon-16x16.png>
    <link rel=manifest href=/manifest.json>
    <meta name=theme-color content=#4DBA87>
    <meta name=apple-mobile-web-app-capable content=no>
    <meta name=apple-mobile-web-app-status-bar-style content=default>
    <meta name=apple-mobile-web-app-title content=pwap>
    <link rel=apple-touch-icon href=/img/icons/apple-touch-icon-152x152.png>
    <link rel=mask-icon href=/img/icons/safari-pinned-tab.svg color=#4DBA87>
    <meta name=msapplication-TileImage content=/img/icons/msapplication-icon-144x144.png>
    <meta name=msapplication-TileColor content=#000000>
</head>

<body>
    <noscript><strong>We're sorry but pwap doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div class=content-wrapper>
        <div id=app></div>
    </div>
    <script src=/js/chunk-vendors.0e42f062.js></script>
    <script src=/js/app.1e49a2f5.js></script>
</body>

</html>
javascriptvue.jsvuejs2

Answer №1

The problem lies in the incorrect path to your assets within your build files.

To resolve the issue caused by the extra / prefix, you need to modify the configuration file index.js located in the config folder of your project:

Change assetsPublicPath: '/' to assetsPublicPath: ''

After making this adjustment, rebuild your application to eliminate the issue and ensure that it displays correctly.

If you are using Vue UI to develop your app, follow these steps:

Access your project in Vue UI and go to the configuration tab. Select "Vue cli" and remove the unnecessary / from the baseUrl input field (labeled as "URL-utgangspunkt" in the Norwegian screenshot below):

https://i.sstatic.net/nH6vh.png

Answer №2

In order to address this issue, you can create a new js file named vue.config within your project directory, alongside the package.json file. Insert the following code into this newly created js file. The specified instructions mention including a forward slash '/', but doing so may cause issues with paths to js & css files. Therefore, make the adjustments outlined below. Remember to re-run the build process by executing npm run build afterwards.

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

Answer №3

For those working with vue, the solution can be implemented within the vue.config.js file:

module.exports = {
    baseUrl: '',
    // additional configuration settings here
};

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

InfoWindow from JSON data not displaying in Google Maps V3

My current project involves using PHP to generate a JSON file from data stored in MySQL. One of the goals I have is to display certain pieces of this data in an information window on Google Maps whenever I click on a marker. Although I've managed to ...

javascriptajaxjsongoogle-mapsgoogle-maps-markers

Utilize Vue: Bring in the router within a helper class and navigate to a specific

I'm new to utilizing Vue, and I am currently attempting to import my existing router instance into a JavaScript class where I manage the Authentication. This is the content of my router file: import Vue from 'vue'; import Router from &apos ...

javascriptvue.jsimportvue-router

Using jQuery to select elements with specific innerHTML values

$('.select option:selected[innerHTML="5"]') In this case, I am attempting to choose an option that is currently selected and has innerHTML that perfectly matches a specific string (for example: "5") For reference, here is a fiddle link: http:// ...

javascriptjqueryselectorinnerhtml

Creating a User Authentication System using Node.js and Express

I am currently working on developing an application with node.js and expressJs, even though I come from a PHP background. In PHP, we typically use the session to handle logins, so naturally, I thought that in the case of node.js it would be similar. After ...

javascriptphpnode.jsexpressexpress-session

Change the content of a selectbox dynamically with the help of jQuery and AJAX

Currently, I am exploring the best approach for a specific challenge: I have various categories, subcategories, sub-subcategories, and so on, that I need to display in separate select boxes. For instance, initially, the options may look like this: <sel ...

javascriptjqueryhtmlajax

Speed up the opening and closing of a div element on mouse hover

Looking to create a smooth delay for opening and closing a div when mouse hover. Here is the code I have: function show_panel1() { document.getElementById('hoverpanel1').style.display="block"; } function hide_panel1() { document.getElementByI ...

javascriptjqueryhtmlcss

What is the best method to remove duplicate watches in AngularJS?

After creating a basic TODO app using AngularJS, I discovered some interesting features. The app allows me to manage my list of tasks, such as deleting, marking as completed, and adding new ones. A unique functionality is the ability to edit the task tit ...

javascriptangularjsperformance

Find an element within an array in a separate JavaScript file (leveraging AngularJS)

I am new to AngularJS and decided to create a custom map with my own markers that I defined. To do this, I started by creating a JavaScript file containing an array: var myMarkers=[{ method1='..', methode2='..' },{ method1=&a ...

javascriptarraysangularjsgoogle-mapssearch

Transmitting HTML content to the browser from the client using Node.js

Quoted from: Book - "Getting MEAN with Mongo, Express.." When it comes to responding to requests in your application by sending HTML to the browser, Express simplifies this process compared to native Node.js. With support for various templating e ...

javascriptnode.jsangular

Leverage the power of React by utilizing SVGR to easily integrate SVG files

Wondering if there's a way to bring in an SVG file from my public folder and use it as a React component like this: import { ReactComponent as MySvg } from '/assets/svg/mysvg.svg'; const MyComponent = () => { return ( <div> ...

javascriptreactjssvgsvg-react-loader

What is the best way to instantly validate a form in React before submitting?

Having trouble with my form validation. The issue is that after validating the form on submit, I have to click the submit button a second time to actually send it and see the console.log at the bottom of the file. Any ideas on what might be causing this a ...

javascriptreactjsforms

Having trouble getting smooth scrolling with easing to function properly

I'm facing an issue with a JQuery function that is supposed to enable smooth scrolling using JQuery easing, but for some reason, it's not functioning correctly and I'm unable to pinpoint the error. Here is the code for the function: $(func ...

javascriptjqueryhtmlcsseasing

Unable to interact with the page while executing printing functionality in

component: <div class="container" id="customComponent1"> New Content </div> <div class="container" id="customComponent2"> different content </div> ...

javascripthtmlangularprinting

Node.js route does not support io.sockets.on functionality

Incorporating io.sockets.on into a route within a Node.js and Express application is proving to be challenging. I have been following the guidance provided here: While I am able to successfully send io.sockets.emit events, I am encountering an issue with ...

javascriptnode.jsexpresssocket.ioroutes

Issue with Scrollspy Functionality in Bootstrap 4

Scrollspy feature isn't working in my code. <nav class="navbar navbar-expand-lg fixed-top navbar-dark" role="navigation"> <div class="container"> <a class="navbar-brand" href="#featured"><h1></h1></a> < ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Is it advisable to utilize getters for a state property that is not computed?

After using vuex for a week, I have established the following state in my store state: { propA: "test", propB: 5.9 } To access propA in my components, I originally used: this.$store.state.propA; Everything was functioning correctly. However, t ...

vue.jsvuejs2vuex

Comparing the efficiency of using arrays versus mapping to an object and accessing data in JavaScript

When considering the basics of computer science, it is understood that searching an unsorted list typically occurs in O(n) time, while direct access to an element in an array happens in O(1) time for HashMaps. So, which approach yields better performance: ...

javascriptarraysjsonperformancedictionary

Adjusting iframe height dynamically across domains using Jquery

Can this task be accomplished using jQuery alone without using any bulky plugins? While I am aware of the numerous plugins and alternatives available, I am looking for the shortest, most robust, and cleanest solution (ideally utilizing jQuery). Feel free ...

javascriptjqueryiframedynamicheight

JavaScript keydown event for rotating images

I am experiencing an issue with JavaScript animation. I have incorporated code from this particular link into my keydown function. However, the code is not functioning as expected. While the code from the provided link works fine on its own, within the key ...

javascriptjquerybox2dkeydown

how to adjust the width of table columns dynamically using ng-repeat and AngularJS

Working on a user interface that contains a table where the column widths adjust according to percentage data. I'm using ng-repeat to populate the table, but need help setting unique widths for each piece of data received. Here's some of my Angul ...

javascriptjqueryhtmlcssangularjs