Estoy migrando un sitio web HTML puro a un proyecto vue-cli, pero al lanzar el build
para subirlo al servidor (vue-cli-service build
) siempre transforma mal la ruta de los estáticos. Si prefijo la ruta de cada uno con './'
los reconoce bien, pero conforme el proyecto va incluyendo mas imágenes se va convirtiendo en un problema asegurarse de modificar todas estas rutas a mano
¿Puede ser por la estructura del proyecto o en la ruta definida para acceder a estos ficheros?
Ejemplo de cómo se está definiendo la ruta de los estáticos actualmente
<img src="../assets/imagen.jpg" />
Este es el package.json
del proyecto Vue.
{
"name": "website",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.0",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-eslint": "^4.1.1",
"@vue/cli-plugin-babel": "^4.1.1",
"@vue/cli-service": "^4.1.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^6.0.1",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
Y la estructura del proyecto
-dist
-js
|-script.js
-libs
-node_modules
-public
-src
|-assets
| |-imagen.jpg
|-components
|-App.vue
|-main.js
Un saludo!