Vue.js Build not working with npm run build

Question

I am trying to get vue.js source code for production. I used this command npm run build. I got a dist folder with index.html and a folder named static with all css and js.

When I tried running the index.html in localhost, ie, xampp server I got a blank page .

Is it possible with vue.js to run in xampp.

Answer 1

I had the same issue, and I solved the problem by deleting the "/" from the dist/index.html file. I had something like this:

<script src=/js/app.632f4e30.js></script>

And I change it to:

<script src=js/app.632f4e30.js></script>

Answer 2

First create vue.config.js file in project root directory and define base url in it using below code

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

If you use Vue CLI 3.3 or higher, use

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ?
      '/production-sub-path/' :
      '/'
}

Replace production-sub-path with your folder name ... eg. http://www.example.com/production-sub-path/ ... and run below command to build the project

npm run build

After finishing the build ... Copy/Upload all files in dist folder to your /production-sub-path/ folder... That's it

For more info checkout the official documentation https://cli.vuejs.org/guide/deployment.html#general-guidelines

Answer 3

I had this issue before as well. I solved it by making a change to the index.js file in the config folder. Under build, I changed:

assetsPublicPath: '/',

to

assetsPublicPath: '',

and tried npm run build again. I checked the dist file and opened the index.html and it worked, no blank page.