为什么webpack 5和vue 3不surch图像,即使我选择了正确的。
当我使用webpack 4图像转换到base64,但当我更新插件到新版本时,我得到错误。
<img src="/src/assets/logo.png"</a>--> error
<img src="@/assets/logo.png" </a> --> error
在css文件工作良好(转换为base64)如果我这样做,它的工作
:src="require('@/assets/images/logo.png')"
这是路径图像:
enter image description here
404错误提示
enter image description here
当我得到图像到vue组件时:
import MyImage from '@/assets/logo.png'
我得到正确base64图像
Package :
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit --coverage",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint",
"clean": "rm -rf node_modules target",
"i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\"",
"test": "vue-cli-service test:unit && vue-cli-service test:e2e"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.0",
"@fortawesome/free-regular-svg-icons": "^6.1.0",
"@fortawesome/free-solid-svg-icons": "^6.1.0",
"@fortawesome/vue-fontawesome": "^3.0.0-5",
"@mdi/font": "5.9.55",
"@popperjs/core": "^2.11.4",
"axios": "0.21.4",
"bootstrap": "^4.6.1",
"core-js": "3.20.3",
"jquery": "^3.6.0",
"paginationjs": "^2.1.5",
"popper.js": "^1.16.1",
"properties-to-json": "^0.2.1",
"roboto-fontface": "*",
"summernote": "^0.8.18",
"summernote-cleaner": "^1.0.0",
"v-pagination-3": "^0.1.7",
"vee-validate": "^4.5.10",
"vue": "3.2.31",
"vue-i18n": "^9.1.0",
"vue-router": "4.0.11",
"vue-sweetalert2": "^5.0.2",
"vue3-summernote-editor": "^1.0.2",
"vuejs-paginate-next": "^1.0.2",
"vuetify": "^3.0.0-beta.0",
"vuex": "4.0.2",
"webfontloader": "^1.0.0",
"yup": "^0.32.11"
},
"devDependencies": {
"@intlify/vue-i18n-loader": "^3.0.0",
"@types/jest": "27.4.0",
"@types/webfontloader": "^1.0.0",
"@typescript-eslint/eslint-plugin": "5.18.0",
"@typescript-eslint/parser": "5.18.0",
"@vue/cli-plugin-babel": "5.0.4",
"@vue/cli-plugin-e2e-nightwatch": "5.0.4",
"@vue/cli-plugin-eslint": "5.0.4",
"@vue/cli-plugin-router": "5.0.4",
"@vue/cli-plugin-typescript": "5.0.4",
"@vue/cli-plugin-unit-jest": "^5.0.4",
"@vue/cli-plugin-vuex": "5.0.4",
"@vue/cli-service": "~5.0.4",
"@vue/compiler-sfc": "3.2.11",
"@vue/eslint-config-typescript": "9.1.0",
"@vue/test-utils": "2.0.0-rc.14",
"babel-jest": "26.6.3",
"chromedriver": "96.0.0",
"eslint": "^7.5.0",
"eslint-plugin-vue": "8.6.0",
"geckodriver": "2.0.4",
"node-sass": "6.0.1",
"sass": "^1.38.0",
"sass-loader": "10.2.0",
"typescript": "4.5.5",
"vue-cli-plugin-i18n": "~2.3.1",
"vue-cli-plugin-vuetify": "~2.4.8",
"vue-jest": "5.0.0-alpha.10",
"vuetify-loader": "^2.0.0-alpha.0"
}
Vue配置:
// vue.config.js
// const path = require('path')
module.exports = {
// proxy all webpack dev-server requests starting with /api
// to our Spring Boot backend (localhost:8098) using http-proxy-middleware
// see https://cli.vuejs.org/config/#devserver-proxy
configureWebpack: {
resolve: {
alias: {
jQuery: 'jquery',
$: "jquery",
jquery: "jquery",
}
}
},
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8098', // this configuration needs to correspond to the Spring Boot backends' application.properties server.port
ws: true,
changeOrigin: true
}
}
},
// Change build paths to make them Maven compatible
// see https://cli.vuejs.org/config/
outputDir: 'target/dist',
assetsDir: 'static',
pluginOptions: {
i18n: {
locale: 'ru',
fallbackLocale: 'en',
localeDir: 'locales',
enableLegacy: false,
runtimeOnly: false,
compositionOnly: false,
fullInstall: true
},
vuetify: {
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
}
}
};
西班牙司法协会:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020,
parser: '@typescript-eslint/parser'
},
rules: {
'vue/multi-word-component-names': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
"@typescript-eslint/no-this-alias": [
"error",
{
"allowDestructuring": false, // Allow `const { props, state } = this`; false by default
"allowedNames": ["vm","self","$this"] // Allow `const vm= this`; `[]` by default
}
]
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
},
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
我什么时候可以修复错误?
1条答案
按热度按时间yeotifhr1#
这可能是webpack的问题,因为您的图像文件没有正确绑定。请尝试在src中使用require()方法处理图像。示例:
这可确保文件被捆绑。
干杯:)