VueJS - after npm run build I got blank page

Question

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!

Now I'm really scared, I'm building a web app using Vue version 2.5.2 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 Github forum, no answers... Also, there are no errors in the console log browser.

Answer 1

Perhaps the simplest way to solve the issue is to create a file vue.config.js in the project's root directory and add to it the following code:

module.exports = {
    publicPath: ''
}

In my situation, this solved the problem. Source of information: see here.

Answer 2

I was having the same problem and did not get a black page when I removed mode: 'history' in vue-router (as Dean mentioned).

From VueJs documentation:

.... 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).

Answer 3

I searched forever with this same issue (npm run dev worked but build had a blank page).

The assetsPublicPath can be updated in the /config/index.js file if your project will end up on a server in a subfolder. But, what finally worked for me was that I was using mode: 'history' in my router setup. This had no problems during dev but in build it would not work.

There are more details listed here about configuring your server to work with history mode here. But I didn't want to mess with server settings at the moment and if I didn't use history mode then it instantly worked for me.