Vue Js in production not displaying file correctly

I just finished developing a Vue/Vuetify JS +Laravel API(back end). Now I am trying to move it to production mode (to a new server). I ran "npm run build" to generate the file for production. It worked fine command and I have committed the file. however, I am having behavior that I don't know what is happening. When I try to access the site it seems like it does not load my JS file in my app.blade.php file. Below is what I have in my blade. I have confirmed the files exist in the server(public folder). It only displays "scripts" on the page.

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico>
    <title>vue-material-admin-full</title>
    <link href=/css/app.5ca87fdf.css rel=preload as=style>
    <link href=/css/hunk-vendors.ad1efc67.css rel=preload as=style>
    <link href=/js/app.2d64425d.js rel=preload as=script>
    <link href=/js/chunk-vendors.4fbac20a.js rel=preload as=script>
    <link href=/css/chunk-vendors.fbe3c9f7.css rel=stylesheet>
    <link href=/css/app.5ca87fdf.css rel=stylesheet>
</head>

<body><noscript><strong>We're sorry but vue-material-admin-full doesn't work properly without JavaScript enabled. Please
            enable it to continue.</strong></noscript>
    <div id=app></div><script src=/js/chunk-vendors.4fbac20a.js></script>___scripts____
</body>

</html>

Here is my vue.config.js

module.exports = {
  // chainWebpack: config => {
  //   config.plugins.delete('prefetch');
  // },
  "transpileDependencies": [
    "vuetify"
  ],
  publicPath: '/app/',
  outputDir: '../../public/',
  indexPath: process.env.NODE_ENV === 'production'
  ? '/app'
  : '/'
}

Solution 1:

After your production build is done, you need to link your js files, in the same order, as mentioned in the Official Laravel Docs.

Try again after adding these at the bottom of your app.blade.php file.

Laravel - Compiling Assets

enter image description here

Vue Js in production not displaying file correctly

Solution 1:

Related

Recent Posts