我开始了一个新的vue.js项目,所以我使用vue-cli工具脚手架出一个新的webpack项目(即vue init webpack)。
当我浏览生成的文件时,我注意到src/router/index.js文件中有以下导入:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
这是通过Webpack解析完成的。别名配置选项。
在Vue Webpack模板中,Webpack被配置为将@/替换为src路径:
vue.conifg.js
const path = require('path');
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
...
'@': path.resolve('src'),
}
},
...
别名使用如下:
import '@/<path inside src folder>';
或者你也可以在tsconfig中创建变量:
"paths": {
"@components": ["src/components"],
"@scss": ["src/styles/scss"],
"@img": ["src/assests/images"],
"@": ["src"],
}
这可以用于命名约定:
import { componentHeader } from '@components/header';