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):

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

Exploring asynchronous data handling in AngularJS using promises

Currently, I am working on a single page application using angularJS and encountering some difficulties in storing asynchronous data. In simple terms, I have a service that contains my data models which are returned as promises (as they can be updated asy ...

javascriptangularjspromisedeferred

Monitoring the validity or errors in AngularJS input fields

I'm attempting to observe the $error or $valid status of a control. Here is the control in question: <form id="myForm" name="myForm"> <input name="myInput" ng-model="myInputMdl" business-validation/> </form> The business-validat ...

javascriptangularjsvalidationangularjs-scope

Preserving color output while executing commands in NodeJS

My Grunt task involves shelling out via node to run "composer install". var done = this.async(); var exec = require('child_process').exec; var composer = exec( 'php bin/composer.phar install', function(error, stdout, stderr) { ...

javascriptnode.jsstdoutgruntjschild-process

What is the best way to incorporate a background image in a Bootstrap tooltip?

I'm having trouble displaying an element with a background-image property within a Bootstrap tooltip. The image is not showing up as expected. <div class="big-panel"> <a href="#" data-bs-toggle="tooltip" data ...

javascripthtmlcsstooltipbackground-image

What are the steps to fix a timeout error with React.js and socket.io acknowledgements?

My setup includes a Node.js server and a React.js client application. Data is exchanged between them using socket.io, but I'm running into an issue with implementing acknowledgment. Whenever I try to implement acknowledgment, I receive a timeout error ...

javascriptnode.jsreactjssocket.io

Ways to avoid extra function loads in JavaScript

I'm currently working on an instant search feature and have some code implemented: $(function() { var timer; $("#searchterm").on('keypress',function() { timer && clearTimeout(timer); timer = setTimeout(doStuff, 800); tim ...

javascriptjqueryhtmlajax

Sorting tables with jQuery UI sortable() and rowspan功能

Can jQuery UI's sortable() be configured to sort rows based on their "containing" element only? I have a table with rowspanned cells that should only be sorted within their respective spanned columns. var $sortable = $('.nested-sortable tbody&ap ...

javascriptjqueryjquery-uijquery-ui-sortable

Combining all code in Electron using Typescript

I am currently working on developing a web application using Electron written in Typescript and I am facing some challenges during the building process. Specifically, I am unsure of how to properly combine the commands tsc (used to convert my .ts file to ...

javascripttypescriptnpmelectron

The proper way to implement global scripts in Next.js

I am currently working on implementing a global fade-in animation for all components in my application. By adding the className "fadeIn" to each element and setting the default opacity to 0, I then utilize JavaScript to change it to 1 when the element is v ...

javascriptreactjsnext.js

What is the best way to exchange the chosen selection within 2 select elements?

I have been trying to swap the cities in my select fields using two select elements, but for some reason, it is not working when the button is clicked: <div class="select-wrapper"> <select class="airport-select__departure"> <o ...

javascriptjqueryselectjquery-select2

javascript unable to change the text in the textarea

My application takes user input from a textarea element, calls an API to retrieve values, and then compares those values against a list of known "badwords." If a match is found, the word is highlighted in red to indicate it is spelled incorrectly. The pro ...

javascriptjqueryreplaceappendtextarea

The Highchart column chart is triggering the drilldown event multiple times

I have created a column chart using Highchart and I am facing an issue with the drilldown functionality. Whenever I click on a bar multiple times, the drilldown event triggers multiple times as well. This results in the drilldown event being triggered repe ...

javascriptjqueryangularjshighchartshighcharts-ng

Do not fetch data again after a re-render

My code is facing an issue where every time I click toggle, the Child component re-renders and triggers another API request. My goal is to fetch the data once and then keep using it even after subsequent re-renders. Check out the CodeSandbox here! functio ...

javascriptreactjsfetch-api

Disable system discord.js

Hey there, I'm experiencing an issue with my code and could use some help. Every time I try to use my mute command, it keeps spamming "You need permission to use command". Below is the snippet of my code: client.on('message', message => { ...

javascriptnode.jsdiscorddiscord.jsbots

What is the reason that the 400 status code consistently causes the enter catch block to execute when using axios?

In the frontend of my website, there is a contact form with three fields -> name, email, message. These fields are then sent to the backend using Axios. If a user fails to fill out any of the required fields, they should see a message saying "please f ...

javascriptnode.jsreactjsexpressaxios

NgModel in Angular Datapicker does not successfully transmit value

My page features a form that functions as a filter search, with one of the fields being a date field. I have configured the Angular UI datepicker plugin (https://github.com/angular-ui/ui-date) and the calendar pops up when I focus on the date field. Howe ...

javascriptangularjsangularjs-directiveangular-ngmodel

What is the best way to transform a GET request with a query string into a promise?

After successfully making a request with querystring params, I encountered an issue while trying to promisify my request: // Works var Promise = require("bluebird"); var request = Promise.promisifyAll(require("request")); request.get({ url: 'htt ...

javascriptnode.jsrequestnpm

When a base html tag is dynamically added, the browser mistakenly loads assets twice

When managing relative paths on a website, I utilize the <base> tag within the <head> section of each page. Although all resources loaded via relative-like paths in the documents are displayed correctly, my observations show that browsers such ...

javascriptjqueryhtmloffline-browsing

Angular Redirect Function: An Overview

In the Angular project I'm working on, there is a function that should navigate to the home when executed. Within this function, there is a condition where if true, it should redirect somewhere. if (condition) { location.url('/home') ...

javascriptangulartypescriptredirectlocation

jQuery plugin is not effectively targeting the directive

Recently, I have been experimenting with using a sleek jQuery datepicker and decided to turn it into a directive for my angular app. The implementation of the directive is currently very straightforward: directive('datePicker', function() { ...

javascriptjqueryangularjsangularjs-directive