Vue无法解析文件踩坑

在Vue项目中使用bgi设置背景图，结果无法解析文件

直接用绝对路径也无法解析

vue.config.js

configureWebpack: {
  name: name,
    resolve: {
    alias: {
      '@': resolve('src')
    }
  },

@符号

在Web开发中，特别是在使用Vue.js和它的构建工具Vue-cli时，@ 符号通常用作一个别名（alias），它指向项目的 src 目录。这是Vue-cli默认设置的一部分，用于简化模块导入和路径引用。

例如，假设有一个位于 src/assets/images 目录下的图片文件。在Vue组件的样式中，这样引用它：

background-image: url("@/assets/images/login-background.png");

这里，@ 会被构建工具Webpack解析为 src 目录的路径，因此实际引用的路径就是 src/assets/images/login-background.png。

使用别名的好处在于，如果你的项目结构发生变化（重命名或移动 src 目录），只需要更新构建配置中的别名设置，而不需要在项目的每个文件中手动更新路径。

然后会报错，还是路径不对的问题 vue2.6及以上版本，用的是webpack4.0就会导致这种错误，需要换一种写法:

background-image: url("~@/assets/images/login-background.png");

~也是一个别名，用于指向node_modules目录

这样Webpack才知道从哪里导入文件

以下是Vue-cli用来导出内部Webpack配置的一个脚本 其中并没有看到该别名

可能得看内部的webpack配置？能力有限，暂时知道怎么用就好了。

webpack.config.js

// this file is for cases where we need to access the
// webpack config as a file when using CLI commands.

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()

参考文献

vue项目使用background-image设置背景图报错的解决_vue background-image: url(-CSDN博客