Launch your VueJS application on your local machine

I've been attempting to host a VueJS application created with Vue CLI/Webpack on my local server without using npm run dev. I tried running npm run build and transferring the files to my htdocs on Mamp, but unfortunately, it's not functioning as expected. Here is the directory structure of my project:

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

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

Here is the index.html in my root folder:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

And here is the index.html in the dist folder:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>demo</title>
    <link href=/static/css/app.e1c36c05dd8e70649268723708cfb519.css rel=stylesheet>
  </head>
  <body>
    <div id="app"></div>
    <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
    <script type=text/javascript src=/static/js/vendor.3fae27b6d0a0572472a3.js></script>
    <script type=text/javascript src=/static/js/app.e5eb3a5fa6134479362c.js></script>
  </body>
</html>

What could be the issue here?

Appreciate any help! Thank you!

Answer №1

1 - npm run build

2 - Copy the compiled files from the build folder or dist folder, including index.html

3 - Create a new folder named test in your htdocs directory

4 - Navigate to localhost/test in your browser

If you encounter any issues, try viewing the source code in a text editor and adjusting the paths of your source files. You may also need to add a base href tag. Your current code references /static/

I suggest replacing:

<script type="text/javascript" src="/static/js/app.e5eb3a5fa6134479362c.js"></script>

With:

<script type="text/javascript" src="http://localhost/test/static/js/app.e5eb3a5fa6134479362c.js"></script>

Don't forget to check for any console errors as well.

Answer №2

Does it seem like a blank page to you? Have you encountered any errors in the console?

I suspect this issue is occurring because the system is unaware of the location of the root index file.

To resolve this, follow these steps:
- Navigate to the "htdocs folder" and create an empty folder (for example, name it as abc).
- Locate the "config folder" within your project directory.
- In the "config folder," you'll find a JavaScript file named index.js.
- Open the index.js file and modify the "assetsPublicPath" path under build. By default, it's set as '/'. Change it to '/abc/' and then run npm build. After that, place all the generated files from the build process into that folder. This way, the system should be able to locate the root index file correctly.
- Finally, navigate to http://localhost/abc/

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

Is there a way to trigger the animation of this text effect only when the mouse is scrolled to that specific section?

Here is a cool typing text effect created using HTML, CSS, and JavaScript. Check out the code below: (function($) { var s, spanizeLetters = { settings: { letters: $('.js-spanize'), }, init: function() { ...

CAUTION: Attempted to load angular multiple times while loading the page

I encountered a warning message while working on my project, causing errors in calling backend APIs due to duplicate calls. Despite attempting previously suggested solutions from the forum, I am stuck and seeking assistance. Can anyone provide guidance? Be ...

Tips for retrieving JSON data using ajax with jPut

Recently, I stumbled upon a handy jQuery plugin called Jput that allows for easy appending of JSON data to HTML content. You can check it out here. However, I am curious about the process of sending and retrieving JSON data via AJAX. Any insights or guida ...

Unable to install @uirouter/angularjs using npm

Encountering an error while trying to npm install @uirouter/angularjs, the error message displayed is: npm ERR! code E404 npm ERR! 404 Not Found: @uirouter/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f7f8f1e3faf7e4bfb9f8d ...

Generate a .py file through an HTML button click and save it to your device

My current project involves developing HTML and JavaScript code for a chatbot. I need to implement a feature where, upon receiving a Python program from the chatbot, a download button should be displayed. When users click on this Download button, they shou ...

Generating a JSON data set with two separate pieces of data, not contained within a dictionary

Within my application, there exists an HTML table that is dynamically generated using the following code: function generateTableRow() { var emptyColumn = document.createElement('tr'); emptyColumn.className ='data'; emptyColumn.inne ...

Having trouble incorporating an API module into a nested component in Vue

I have encountered a perplexing issue when attempting to import an API module into a nested component within a Vue application. After simplifying the problem as much as possible, I created a codesandbox example to demonstrate it. The problem arises when ...

Ionic 2: Image source not being updated

When working with Ionic 2, I encountered an issue where the src attribute of an <img> element was not updating inside the callback function of a plugin. Here is the template code: <img [src]="avatar_path" id="myimg" /> After using the Came ...

Encountering an Error While Installing NPM

While attempting to install the browserify npm module, I encountered the following error: praful@ubuntu:~/terminalcloud$ npm install -g browserify npm http GET https://registry.npmjs.org/browserify npm ERR! Error: failed to fetch from registry: browserif ...

Instructions on how to insert a single parenthesis into a string using Angular or another JavaScript function

Currently, I am employing Angular JS to handle the creation of a series of SQL test scripts. A JSON file holds various test scenarios, each scenario encompassing a set of projects to be tested: $scope.tests = [ { "Date": "12/31/2017", "Project": ...

What are the differences between using embedded documents and references in a mongoose design model?

I am currently in the process of developing a discussion forum using Node.js and mongoose. The structure I have in mind involves users being able to participate in multiple forums, with each forum containing multiple comments. Additionally, users should ha ...

Issues logging in with Nexus using NPM

My Nexus server is set up behind a proxy with npm Bearer Token Realm activated in Nexus. Within the Nexus, there are three repositories: npm (group containing npm-private and npm-registry), npm-private (hosted), and npm-registry (proxy to https://registry. ...

Identify when users reach the end of a webpage through scrolling using mousewheel actions and scroll events

I want to track when a user reaches the end of a page and tries to scroll further, even though there is no more content to see. One of my usability metrics includes identifying dead scrolls, so I need a reliable way to detect when users attempt to scroll ...

Achieving a draggable object to land on a designated target

Before you jump to conclusions based on the title, let me clarify that I am not referring to jQuery UI draggable. Instead, I am discussing a plugin that I am currently developing for the community. The goal of my plugin is to create a designated target fea ...

Replace an NPM package with a completely different package

As per the official NPM documentation, utilizing the overrides feature in the package.json file allows for the substitution of a package with an entirely different one: Overrides serve as a means to swap out a package within your dependency hierarchy wit ...

Using NextJS: Customizing page names for cleaner URLs

Currently working on a project in NextJS, I've come across an interesting observation. The file name within my pages folder seems to directly correspond to the path displayed in the URL bar. My question is, can I possibly create a structure like this ...

Creating a compact HTTP server in c/c++ and incorporating AJAX capabilities into it

Creating a dynamic webpage that can automatically update information is my goal. I've managed to establish a socket and send HTML and Javascript files from my c/c++ application to the browser. However, now I'm stuck on how to proceed. How do I p ...

What is the best way to implement collision detection using raycasting?

For my university project, I am looking to implement collision similar to what is shown in this example. However, I am facing an issue where collision is only working on the top of the object. I referred to this for guidance. My goal is to add collision to ...

Express.js Passport authentication automatically fails to skip the strategy

UPDATE The code has been relocated from the inner passport local-signup to a separate handler and it is functioning correctly. The issue seems to be with Passport and its utilization of the local-signup, however, the reason behind this is unknown to me. ...

Can Google analytics track and record events that occur when a GA session comes to an end

Is there a way to trigger an event in Google Analytics once a user's session comes to an end? (Not referring to a local session, but one tracked by Google Analytics). Based on information from https://support.google.com/analytics/answer/2731565?hl=en ...