What is the process for launching a Vue.js project on a local machine without using a server?

I utilized 'vue-cli' and executed the 'npm run build' command to generate a build version of my project. As a result, an 'index.html' file was automatically created in the 'dist' folder. You can see the image here:

https://i.sstatic.net/yG3o7.jpg

When I attempted to open the index.html file in my browser, it failed to load. The console displayed this error message:

https://i.sstatic.net/pOp1E.jpg

The contents of my Index.html file are as follows:

<!DOCTYPE html>
<html lang=ru>
<head>
    <meta charset=utf-8>
    <title>cv</title>
    <style type=text/css>
       html, body{
           width: 100%;
           height: 100%;
       }</style>
    <link href='/static/css/app.b3ceb6191281c6a4dd333aa0b8aed7cd.css' rel=stylesheet>
</head>
<body>
    <div id=app>
    </div>

    <script type=text/javascript src='/static/js/manifest.488e7f096afe65619705.js'></script>
    <script type=text/javascript src='/static/js/vendor.fa2e9b388f427a714cca.js'></script>
    <script type=text/javascript src='/static/js/app.d3d1742ab1cad95402a6.js'></script>
</body>
</html>

What steps do I need to take in order to run it in the browser without using a server?

Answer №1

To avoid using the server, you must update all source links to

='./static/

or

='static/

The first option is recommended

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 it common for the vuetify main.sass bundle file to have a gzipped size of 30 kilobytes?

Just a quick question: Is the file size considered normal? Will it still contain all component stylings even if removed by treeshaking? Treeshaking is enabled. Any advice would be greatly appreciated! https://i.stack.imgur.com/VKaQQ.png ...

Strategies for sorting through numerous characteristics of a hierarchical array that may stretch across multiple levels of the tree

In order to simplify the process, I am looking for a way to filter multiple properties of a parent-child array that may have multiple levels. This is specifically for an Open Source datagrid library that is utilized by hundreds of users. The array consist ...

What is the best way to create query strings for AJAX URL using jQuery or JavaScript?

At the moment, I am implementing ajax and jquery to dynamically update search results based on different filtering categories within a form. My challenge lies in the fact that I aim to pass varying variables to the URL used for ajax, derived from checkbox ...

`Weaving together and executing several animations using THREE.GLTFLoader in the world of three.js`

After exporting an animated model (spaceship) and an animated camera as a .glb file from Blender using the gltfExporter, I successfully viewed them in the glTF viewer (gltf-viewer.donmccurdy.com), confirming that the issue does not lie with the model or Bl ...

How come the $index value is not being retrieved in my directive?

I am working with a directive that looks like this: .directive('grapharea', function () { return { restrict:'C', compile: function (element, attr) { debugger; //the issue is that attr.passed is being set to grap ...

Can the client (JRE) access server (node) variables without any intermediary steps?

I am in the process of configuring a server that allows clients to connect and indicate their presence by "raising their hand," with only one client allowed to do so at a time. Currently, I am using the express module to send a POST response when a button ...

(Vue.js) The icon fails to be applied

<link rel="icon" href="/static/icons/apple-touch-icon.png" type="image/x-icon"> <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="16x16" href="/static/ ...

Encountering Routing Issues in Express.js Following Passport.js Authentication

My authentication setup with Passport.js is pretty straightforward. After the user successfully authenticates, I redirect them to /work like this. app.post('/login', passport.authenticate('local', { successRedirect: '/ ...

What is the best way to get $q.all to function properly in this scenario?

Having some trouble with my implementation of $q.all in the code snippet below. It seems I may have misunderstood a few concepts as it's not functioning as expected. Would greatly appreciate any guidance or tips. The specific problem lies within $q.a ...

Enhance Bootstrap 4 Navigation with Active State Styling

I'm having trouble with my jQuery code in Bootstrap 4. No matter what I try, I can't seem to add an "active" class to the nav-link that I click on. <script> $(document).ready(function () { $('.nav-link').click(function() { ...

Issues with Google Fonts failing to load correctly

Would you mind taking a look at this issue for me? In all browsers except Firefox, the expected behavior is that a web font remains invisible until fully loaded, preserving space on the page. Interestingly, in Chrome and IE9 (the browsers I tested), ther ...

How can I ensure that the appropriate 'this' is accessed within a callback function for an AJAX request?

When working with a callback function, I am having trouble accessing this. Instead, it seems to be pointing to the AJAX object rather than the object that initially invoked the onClickEmail function. I attempted to store a reference in a variable called th ...

Exploring real-time editing features in Payload CMS with Vue

I have been experimenting with implementing live preview on my Payload CMS using Vue 3 as the front end. I followed a tutorial (link: here) starting at around 11:00, but this CMS is primarily focused on React. I have configured a simple Pages.js collectio ...

Click on the window.location.href to redirect with multiple input values

I am facing a challenge with my checkboxes (from the blog label) and the code I have been using to load selected labels. However, this code seems to only work for one label. Despite multiple attempts, I have found that it only functions properly with one ...

Strategies for positioning identical Highcharts series next to one another

I am currently utilizing highcharts to create column charts. My column chart consists of multiple series, structured like this: Here is the code I am working with: $(function () { var chart; $(document).ready(function() { ...

The JSON array is causing the statement to not compile

I am working with a Json array structured like this: Test = [ { "adj" : [ { "nodeTo" : "x", "nodeFrom" : "y", "data": { "$type" ...

"Retrieve the most recent information without refreshing the page by employing the Vue script setup along with Axios after submitting data

Looking for assistance as I am new to working with vue.js. I currently have 2 Vue files that serve different purposes: Greetinglist.vue, which retrieves data from an API using axios.get Greeting.vue, responsible for posting data using axios.post Upon su ...

Special characters like greater/less than signs have not been properly encoded

I am currently facing an issue in regards to escaping strings on the server side (using Node.js & Express.js) that contain greater/less than signs (<, >). Below is the code snippet I'm using on the server side: socket.on('message', fu ...

Using Async Await in a Node.js event handler

Here is the code snippet that I am currently working with: readInterface.on('line', async (line) => { const splitLine = line.split(',') const domain = splitLine[0] splitLine.shift() const query = `INSERT INTO domain ...

Video playback in IE8 is not supported by mediaelement.js

I have gone through all the questions posted here, but none of them have solved my issue. Currently, the video loads and plays in Chrome, Safari, FF, and IE9, but not in IE8, which is the browser I need to support. You can see the page here. Despite tryi ...