npm run build asset path incorrect #11493

leandro2000vieira · 2024-08-04T18:31:57Z

leandro2000vieira
Aug 4, 2024

After running npm run build, the paths in the generated index.html file are wrong.
index.html

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

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PLN Project</title>

    <!-- Links -->






    <!-- <link rel="stylesheet" href="./src/assets/vendors/select2/select2.min.css"> -->
    <!-- <link rel="stylesheet" href="./src/assets/vendors/select2-bootstrap-theme/select2-bootstrap.min.css"> -->


    <link rel="shortcut icon" href="./src/assets/images/favicon.png" />
  <script type="module" crossorigin src="/assets/index-bTzHCec8.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-B1L8Tksj.css">
</head>

<body class="sidebar-icon-only">
    <noscript>
        <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong>
    </noscript>

    <!-- Mounted app div -->
    <div id="app"></div>

    <!-- Scripts -->
    <script src="./src/assets/vendors/js/vendor.bundle.base.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> -->
    <!-- <script src="./src/assets/vendors/select2/select2.min.js"></script> -->
    <script src="./src/assets/vendors/chart.js/Chart.min.js"></script>
    <!-- <script src="./src/assets/vendors/progressbar.js/progressbar.min.js"></script> -->
    <script src="./src/assets/vendors/jvectormap/jquery-jvectormap.min.js"></script>
    <script src="./src/assets/vendors/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="./src/assets/vendors/owl-carousel-2/owl.carousel.min.js"></script>
    <script src="./src/assets/js/off-canvas.js"></script>
    <script src="./src/assets/js/hoverable-collapse.js"></script>

    <script src="./src/assets/js/misc.js"></script>
    <script src="./src/assets/js/settings.js"></script>
    <script src="./src/assets/js/todolist.js"></script>
    <script src="./src/assets/js/dashboard.js"></script>
    <!-- <script src="./src/assets/js/select2.js"></script> -->

</body>

</html>

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  base: '/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    chunkSizeWarningLimit: 3000,
  },
})

I put all the asset imports in main.js.

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import vuetify from './vuetify'

import Toast from "vue-toastification"
import "vue-toastification/dist/index.css"
import { io } from "socket.io-client"

import 'bootstrap'
import './assets/css/main.css'
import './assets/css/home.css'

// issue imports
import "@/assets/vendors/js/vendor.bundle.base.js";
import "https://code.jquery.com/jquery-3.7.1.min.js";
import "@/assets/vendors/chart.js/Chart.min.js";
import "@/assets/vendors/jvectormap/jquery-jvectormap.min.js";
import "@/assets/vendors/jvectormap/jquery-jvectormap-world-mill-en.js";
import "@/assets/vendors/owl-carousel-2/owl.carousel.min.js";
import "@/assets/js/off-canvas.js";
import "@/assets/js/hoverable-collapse.js";
import "@/assets/js/misc.js";
import "@/assets/js/settings.js";
import "@/assets/js/todolist.js";
import "@/assets/js/dashboard.js";

const app = createApp(App)

const socket = import.meta.env.VITE_WS_CONNECTION
app.provide('socket', io(socket))

const serverBaseUrl = import.meta.env.VITE_API_DOMAIN
app.provide('serverBaseUrl', serverBaseUrl)

// Default Axios configuration
axios.defaults.baseURL = serverBaseUrl + '/api'
axios.defaults.headers.common['Content-type'] = 'application/json'

app.use(Toast, {
    position: "top-right",
    timeout: 3000,
    closeOnClick: true,
    pauseOnFocusLoss: true,
    pauseOnHover: true,
    draggable: true,
    draggablePercent: 0.6,
    showCloseButtonOnHover: true,
    hideProgressBar: false,
    closeButton: "button",
    icon: true,
    rtl: false
})

app.use(createPinia())
app.use(router)
app.use(vuetify)

app.mount('#app')

LinusBorg · 2024-08-05T07:51:36Z

LinusBorg
Aug 5, 2024
Maintainer

My first suspicion would be that you are building with NODE_ENV=development as as an environment variable.

If you don't have that set in the build script, maybe it's set in your terminal env accidentally?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

npm run build asset path incorrect #11493

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Vue

npm run build asset path incorrect #11493

Uh oh!

leandro2000vieira Aug 4, 2024

Replies: 1 comment

Uh oh!

LinusBorg Aug 5, 2024 Maintainer

leandro2000vieira
Aug 4, 2024

LinusBorg
Aug 5, 2024
Maintainer