how to fix npm run build blank display

[ghost]

when npm run dev display correctly, but all link like css, or js build by webpack load completly and i found error "ReferenceError: webpackJsonp is not defined"

this my index html: look and this main js :

import Vue from 'vue' import store from './store' import router from './router' import { sync } from 'vuex-router-sync' import App from './App'

sync(store, router)

/* eslint-disable no-new */ new Vue({ el: '#app', router, store, render: h => h(App) }) i use standalone type

[chrisvfritz]

Does this also happen for you on a freshly-generated project?

[ghost]

yes this happen, i try with apache and nginx, and i try to copy paste code to other file still same. only npm run dev show display correctly

[chrisvfritz]

Are you sure you're actually serving the compiled files in the dist directory?

[kiwina]

just tried a blank out of the box project and run: npm run dev there is a problem with .vue files

[LinusBorg]

just tried a blank out of the box project and run: npm run dev there is a problem with .vue files

The issue that you commented on is not about problems with npm run dev, it's about the production build.

If you have a problem with the dev process, please open a separate issue. and add more information than "there is a problem with .vue files".

[LinusBorg]

I just generated a new project, ran npm run build and started http-server in /dist/

Default page shows without any problems.

[LinusBorg]

I will close this now. If you can provide a reproduction, we can re-open.

[woozyking]

I encounter the same issue from time to time as well, where the manifest gets transferred, but app or other component (by vue-router) js files get "stuck", and leads to a forever blank screen.

Not sure exactly why though

[AngeloAnolin]

I think I am also having the same issue as @woozyking is encountering.

The only difference is that the dist files after building, I am serving via Windows IIS (Internet Information Services).

I do have a valid and working web.config file in the dist folder.

The project I have tries to call Authentication (via Auth0) and then after checking the authentication, nothing is happening. It seems that the router is not routing or serving the correct routes as required.

[abotsi]

Hey, Same problem as @woozyking here. Does anyone understand what could be happening ?

[SSShooter]

@AngeloAnolin @abotsi started http-server and visit 127.0.0.1 is OK,but 127.0.0.1/index.html is blank. i think the problem is related to vue-router,‘index.html’ must be omitted

[flickyiyo]

In dist/index.html change every /static/ to static/

[martijnhiemstra]

It's just like flickyiyo said, all the url's are absolute and should be relative. Someone at VueJS has made a huge mistake making all the url's absolute. In my case I have Ubuntu on my computer and when I open the index.html the url's to the Javascript files start with / meaning the browser wants to look for the Javascript files on the root of my harddisk. Someone at VueJS really needs to wake up and fix this. Relative url's and nothing else.

[tiagomatosweb]

Guys, I think you are missing that SPA is not server side rendering. At least for the majority. So, when you access /anything your web server won't redirect it to index.html. However, if you click on any vuejs router link, it will work due to the fact that the javascript got in action, but not the server side.

To solve this, use .htaccess and redirect all requests to index.html like so

<ifModule mod_rewrite.c>
    RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</ifModule>

Hope it helps someone!

[ivanruslimcdohl]

im having the same issue, please help this is frustrating

[tiagomatosweb]

@IvanRusli777 have you set up the rewrite rule?

[wixys]

After I run "npm run build", I got this tip in the console:

Build complete.

Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.

In my local server, npm run dev works fine, but after upload the project on Apache server, installed node_modules (npm install) and I run "npm run build", I got the tip in the console and a blank page, no errors in dev console in my browser

The path on the server (Apache) is: /mydomainproject/public/projects files:

build config dist node_modules src static .babelrc .editorconfig .postcssrc.js index.html package.json package-lock.json .htaccess

This is my public/config/index.js

build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',

I've changed assetsPublicPath: '/' to assetsPublicPath: './', also I tried assetsPublicPath: './public', but still not work.

Please, someone can help me?

Thanks!

[wixys]

I'm really scared, I'm building a web app using VueJs on local server and everything working fine after run "npm run dev", but after run build on production server (Apache) I got blank page... nobody knows about this problem... I've changed config/index.js, adding relative paths, ./, /, even absolute path (I never work with absolute paths), I've asked in Stackoverflow, no answers... Also, there are no errors in the console log browser.

[AngelKMB]

Hi,

I am having the same problem as wixys. Can anyone help?

[wixys]

I tried with a Vue fresh installation, I got the same blank page and tip in the console after run "npm run build" on a production server.

Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.

[ivanruslimcdohl]

@tiagomatosweb yes, its all working now. my case is solved by changing my nginx server config and directing it to dist folder, so stupid of me

[AngelKMB]

works fine too

[Severin-THIRIOT]

I have the same issue, I work on this for 2 days it's very frustrating

[mirhat]

@Severin-THIRIOT Did you find cause of this issue?

[lawrence615]

Pointing the Nginx root to dist directory worked for me as well. Well explained in this tutorial: https://medium.com/@Web_Bailey/deploy-a-vuejs-app-with-digitalocean-fd6e7af07e40

[neculaionutni]

The best solution I could come up with was to copy the code from dist/index.html to index.html from the root project and then just changed the /static/... path to your_main_folder/static, your_main_folder being the subdirectory from you deployment server. Or if you have it in your root you just have to stick with static/.... Nothing to do with server configuration, as simple as that.

[ghost]

hey guys, i had the same issue. Blank page for production build even though all files were properly served from the dist folder (including index.html) by nginx. Turns out i was using wrong Vue build for my production build. I had "vue.runtime.min.js" set as an alias to vue$ in webpack config. Switching it to "vue.min.js" resolved my problem.

[schiu-choice]

Under config folder, index.js. update the path to assets. From default "/" to "./"

And build again!

works for me!

[fnoori]

If anyone else is having this problem. I fixed mine by removing the "/" from the assetsPublicPath in config/index.js

[vdraceil]

Any other solution besides adding a dot or clearing out build.assetsPublicPath? .. because those two don't work for me.

However, removing mode: 'history' from the VueRouter initialization works, but I do not want hashtags in my URL..

[ManuelSchmitzberger]

My problem was that the webserver was configured wrongly. So the CSS and JS files cannot be found. Simple check this via the browser debugger console.

put that in your nginx.conf::

http {
   server {
        listen 80;
        server_name yourservername.com;
        root html/path_to_your_project;

        index index.php index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

[9nix00]

OK, I found two reason may cause blank display when use build. I have tested so many times, and finally found them, it cost me one day! unbelievable!!!

1. assetsPublicPath,like @schiu-choice said.
2. your Router use history mode. disable this feature will works. but I don't know why, wish team member can fix it. I am not familiar with Vue.

[vladkazakoff]

I found a solution for build production ver. outside server root folder with history mode:

1. in assetsPublicPath add dot like @schiu-choice said;
2. in your vue-router add your specific root folder in all routes. Example: your vue production version host in http://test.test/mainVue so, your main route:

   routes: [
   {
     path: '/mainVue/',
     name: 'mainVue',
     component: mainComponent,
   }

[renaudham]

HI

one note for the people putting the dist in a local apache server Xampp/Wampp you need to put your index.html as index.php and put your files in the root of you vhost. Then all will run well...

[StudioRyuLLC]

@KazakoffJunior...thank you! Your solution resolved the same issue I was having. :)

[0xchetan]

Pointing the root location of server to /dist folder in nginx config worked for me.

[ahmedsamir93]

If anyone else is having this problem. I fixed mine by removing the "/" from the assetsPublicPath in config/index.js

Thank you it works well

[3ehrang]

Anyone who uses wamp server you can create virtualhost for the project like these configs and run your lcoalhost http://vueapp.local works for me

<VirtualHost *:80>
    DocumentRoot "E:\wamp\www\vueapp\dist"
    ServerName vueapp.local
    <directory "E:\wamp64\www\vueapp\dist">
        DirectoryIndex index.html
        AllowOverride all
        Order Allow,Deny
        Allow from all
    </directory>
</VirtualHost>

[tvkit]

http-server wasn't working, but the following worked for me:

npm install -g serve
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist

Details here: Preview Locally @ vuejs.org

[BartusZak]

Invalid options in vue.config.js: "assetsPublicPath" is not allowed disabling history didn't help either any other solutions?

[amucunguzi]

@vdraceil mentioned:

However, removing mode: 'history' from the VueRouter initialization works, but I do not want hashtags in my URL..

From VueJs documentation:

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. (https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode)

So, all you need to do to enable history mode is add a catch-all route:

{
   path: '*',
   name: 'catchAll',
   component: Home
}

NOTE: this catch-all route should go at the bottom -- after all other routes (otherwise, all requests will go to it).

[bties-ogawa]

i using vue cli v3.4.0 with history mode. in my case, it was resolved by to set empty publicPath on vue.config.js

module.exports = {
  publicPath: ''
}

[harishcsha]

Try this, Open --> config > index.js file there will be many configuration, but our aim is to change only the assetsPublicPath in build object from assetsPublicPath: '/' to assetsPublicPath: '',

dev: {
    assetsPublicPath: '/',
  },

  build: {
    assetsPublicPath: '',
  }

NOTE: do not change anything inside dev object let it be as it is.

[bala-techguy]

i using vue cli v3.4.0 with history mode. in my case, it was resolved by to set empty publicPath on vue.config.js

module.exports = {
  publicPath: ''
}

After hours of struggle. This worked for me.

[Chinyoka1]

Hey, I'm using Vue as a SPA in a Laravel project. Does anyone know how to fix it in that case?

[ghost]

i using vue cli v3.4.0 with history mode. in my case, it was resolved by to set empty publicPath on vue.config.js

module.exports = {
  publicPath: ''
}

After hours of struggle. This worked for me.

Where is vue.config.js? I don't see this file.

[mikkybang]

So I have had this error for a while, I tried all the proposed solutions above but none seemed to work. Then I noticed that in development, there was a "you may have an infinite update loop in a component render function" warning, which I had been ignoring, after fixing the component, npm run build started to work well.

I hope this helps somebody

[burnquist]

cannot solve for me imade devedencies like this :
"@babel/core": "^7.12.10", "@vue/cli-plugin-babel": "^4.5.9", "@vue/cli-plugin-e2e-nightwatch": "^4.5.9", "@vue/cli-plugin-eslint": "^4.5.9", "@vue/cli-plugin-unit-jest": "^4.5.9", "@vue/cli-service": "^4.5.9", my mode like this : export default new Router({ mode: 'history', // https://router.vuejs.org/api/#mode linkActiveClass: 'active', scrollBehavior: () => ({ y: 0 }),

routes: configRoutes() }),

On vue.config.js like this
publicPath: process.env.NODE_ENV === 'production' ? './dist/' : '/'

please help this my problem in situasion ......

[amiria703]

For future reference of others: As the things these guys said became old, if you have the same problem, look here and here.

[amiria703]

i using vue cli v3.4.0 with history mode. in my case, it was resolved by to set empty publicPath on vue.config.js

module.exports = {
  publicPath: ''
}

After hours of struggle. This worked for me.

Where is vue.config.js? I don't see this file.

I know it's too late, but see this.