Path to Resources (JavaScript, Images etc.) Not Found with Vue.js Build

Published May 19, 2020

Using @vue/cli 4.3.1

With minimal changes to code/solution I found that resources (path to files) was not found after performing npm run build. I was hoping to just run the newly built web application in the client side browser from File Explorer. I ran the page and saw an empty screen. So what was the issue and resolution?

The issue (visible within the screen capture – white screen and ERR_FILE_NOT_FOUND error message from the Chrome Debugger – Network Tools)

Doing a view source the problem started to surface. You can see below the path was relative to the root directory. While running from File Explorer this must be relative path.

< !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.0">
    <link rel="icon" href="/favicon.ico">
    <title>Cargo</title>
<link href="/js/cargo.js" rel="preload" as="script"><link href="/js/chunk-common.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
    < noscript>
      <strong>We're sorry but Cargo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    
<script type="text/javascript" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="/js/chunk-vendors.js"></script><script type="text/javascript" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="/js/chunk-common.js"></script><script type="text/javascript" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="/js/cargo.js"></script></body>
< /html>

The resolution while difficult to find, was easy to implement. Opening up my vue.config.js I simply referenced the publicPath with a vlaue of publicPath: './'

Finding the documentation, the default value is ‘/’ which is what I was finding.

The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3). This is the equivalent of webpack's output.publicPath, but Vue CLI also needs this value for other purposes, so you should always use publicPath instead of modifying webpack output.publicPath.

By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'.

The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.

Vue CLI Creating a Project–Issue with Hot Reload

Published May 18, 2020

I noticed today after creating a new vue project via “vue create new-app” that hot reload was not working while modifying html within App.vue. How can this be, it is brand new app on the latest bits. Following the instructions on cli.vuejs.org it states that vue-clie-service starts webpack-dev-server out of the box

”The vue-cli-service serve command starts a dev server (based on webpack-dev-server) that comes with Hot-Module-Replacement (HMR) working out of the box.”

Why. Brand new project, with the latest bits and it still did not work.

I found 2 solutions. The first fix was for me, was to add a vue.config.js file to the root directory (alongside the package.json) and add the following devServer property

devServer: {       
   useLocalIp: false,
   proxy: 'http://localhost:8080',
   public: '172.23.3.180:8080'       
}

Note: the public ip address that I used here was from “IPv4 Address” after performing ipconfig in a command prompt. So documenting here will help me find/resolve this next week when this comes up again. But why, and why was it so difficult to find this resolution?

The second solution which I liked better (and seems faster) was as-follows. Again, a modification to the vue.config.js and also adding a new ‘script’ to package.json

configureWebpack: {
   devServer: {
      watchOptions: {
         poll: true
      }
   }
}

The script within package.json. Here you can see I am setting environment NODE_ENV to development using the cross-env npm package (I had to install via npm installl –save-dev cross-env)

"dev": "cross-env NODE_ENV=development vue-cli-service serve --open --host localhost",

Our Blog

Path to Resources (JavaScript, Images etc.) Not Found with Vue.js Build

Vue CLI Creating a Project–Issue with Hot Reload

Recent Posts

Categories

About Us

Useful Links

Our Contacts