Vue项目中设置路径别名

1.有关在vue项目中设置别名
在用vue-cli搭建的vue项目中经常会引用各个地方的文件,而在webpack.base.conf.js这个文件里可以为一些常用的目录设置一个简短且易懂的别名。

2.如何设置别名
在webpack.base.conf.js文件中可以找到这样一段代码:

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
},

extensions代表的是带这种后缀的文件可以自动解析,引入的时候不用写后缀:
import HelloWorld form '../components/HelloWorld'
这里省略了.vue后缀。

alias则代表别名,使用别名可以在引入模块时变得更简单。
例如这里用@代表src目录,在引入组件的时候则可以这么写:

import HelloWorld form '@/components/HelloWorld'
这样依然不是特别方便,因为components目录是我们经常会引用组件的目录,在alias里再加一行:

resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  '@styles': resolve('src/assets/styles'),
  '@common': resolve('src/common')
}
},

main.js就可以这样引入组件了:

import common from '@/common'
import '@styles/reset.css'

需要重新启动

Last modification:April 8th, 2019 at 05:46 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment