vue中配置路径别名

秃头小宝贝@

已于 2022-03-04 10:22:48 修改

阅读量1.3k

点赞数

文章标签： vue.js 前端 javascript

于 2022-03-02 19:30:05 首次发布

本文链接：https://blog.csdn.net/weixin_45974259/article/details/123238016

版权

在Vue项目中，通过修改vue.config.js文件，配置了路径别名，例如'assets'指向'@/assets'，使得在Findmusic.vue文件中引用assets/css/base.css时，可以直接写'assets/css/base.css'，而不再需要使用相对路径'../../../assets/css/base.css'，大大提高了代码的可读性和开发效率。

摘要由CSDN通过智能技术生成

module.exports = {
  lintOnSave: false,
  configureWebpack: {
      resolve: {
        alias: {//配置路径别名//在vue中@默认代表src
          //配置后我们调用assets目录下的某个文件，可以直接通过'assets/该文件名'
          'assets': '@/assets'，
          'common': '@/common',
          'components': '@/components',
          'network': '@/network',
          'views': '@/views',
        }
      }
    }
}

以上代码在vue.config.js文件中.

配置完成后，下图中

我们处于Findmusic.vue文件中，在此文件中我们想引入assets文件中的base.css文件

如果我们使用配置路径别名的方式，直接通过

'assets/css/base.css' 就可以获取

如果按之前默认的方式，我们需要'../../../assets/css/base.css',

对比之下配置路径别名更方便一点