Site Vue.js in production does not load complementary files

Question

I have a project in Vue.js. I ran the

npm run build

to generate the files that will go up to the production server.

But when I open index.html the browser does not render anything and running the console we have that novegador can not locate the files.

The browser understands that the files are at the root of the directory.

Some configuration is missing in package.json that configure this mapping at build time?

"name": "base",
"version": "0.1.0",
"private": true,
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

I’m using Vue-cli’s default settings.

Answer 1

You are running the project via protocol file://, Vue CLI assumes that your application will be deployed to the root of a domain, e.g.: https://dominio.com.br/

According to the documentation of the Vue CLI, you can create a configuration file which will be automatically loaded by @vue/cli-service

// vue.config.js
module.exports = {
  // Opções ...
}

if you are using versions earlier than 3.3 of CLI define baseUrl

baseUrl: '/diretorio_do_projeto/'

for a version of 3.3 or more of the CLI baseUrl has been discontinued, set publicPath

publicPath: '/diretorio_do_projeto/'

you can also check whether it is running in production or not:

 publicPath: process.env.NODE_ENV === 'production' ? '/diretorio_producao/' : '/'

Remember to set up correctly before climbing to the production server

References:

• Configuration Reference
• Vue.config.js