vue 项目中引用路径的配置

最新推荐文章于 2025-09-11 00:43:57 发布

原创

最新推荐文章于 2025-09-11 00:43:57 发布 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

前沿

在日常的项目开发中，经常会引用css,less,js,img等的文件的路径问题，之前也有些模糊，现在记录下来，方便自己清晰的理解一遍，也方便以后使用。

首先说说最常见的`./` `../`两种

./:是指当前目录下
../:是指父级目录下

接下来再说说`@`

@就是你在build文件夹下webpack.base.conf.js文件中的resolve目录下配置的

  resolve: {
    extensions: ['.js', '.vue', '.json','.less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),  //比如说这里的@就指向src
    }
  },

你还可以配置其他的路径，比如说你的项目层级较深，引入图片路径很繁琐。例如

<img class="Width100 Height100" src="../../../../components/baseImg/1901.png">
这样是不是很繁琐，这是后你在webpack.base.conf.js里边配置好就简单了

  resolve: {
    extensions: ['.js', '.vue', '.json','.less'],  //省略扩展名，也就是说引入文件时可以省略后缀
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),  //比如说这里的@就