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

[changefirst]

I fixed this problem by adding dots to beginnibg of every path of linked files in index.html in dist folder.

 Before:  

`

<link href="/js/chunk-vendors.df638b66.js" rel="preload" as="script" />
<link href="/css/app.7094705d.css" rel="stylesheet" />
........
<script src="/js/chunk-vendors.cfe8a783.js"></script>
<script src="/js/app.1cf2902b.js"></script>

`

After: 

`<link href="./css/app.7094705d.css" rel="preload" as="style" />
<link href="./js/app.f0dc6036.js" rel="preload" as="script" />
<link href="./js/chunk-vendors.df638b66.js" rel="preload" as="script" />
<link href="./css/app.7094705d.css" rel="stylesheet" />
.......
<script src="./js/chunk-vendors.cfe8a783.js"></script>
<script src="./js/app.1cf2902b.js"></script>

`

then it showed every thing

[Hashasin]

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

yes

[segunmayor]

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! This helped actually

[AnishKumar-12345]

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.

Hi it's really worked for me thanks

[freddy24]

not work for me. ,sad

[pierrelouisguichard]

"## Solution When using the dist directory add base: ‘./’ into vite.config.js (or vite.config.ts)

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], base: './', // added }) Build in this state"

https://medium.com/geekculture/2022-vite-vue-screen-goes-white-when-deploying-9dcb9fc5b987