对于vuejs里import引用模板路径“@”的解释 - Web前端

在VueJs里，我们在引用模板插件的时候，会用到“@”符号，如下代码：

import Hello from '@/components/Hello'

它是什么意思呢？其实很简单，这是webpack的路径别名，相关定义在这里：

resolve: {
    // 自动补全的扩展名
    extensions: ['.JS', '.vue', '.json'],
    // 默认路径代理
    // 例如 import VUE from 'Vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

此段代码一般在vuejs项目里的bUIld目录下Webpack.base.conf.js里，大家可以去看下，它的含义其实就是js里的src。

在vueJS里，很多这种应用，比如扩展名.vue\.js\.JSON，这样做的好处就是可以大大的减少代码量；在平常的项目里，我们自己也可以去定义一些变量做同样的处理。

标签：路径模板Webimportvuejs