。在vue-cli-4中,相对路径的导入方式发生了变化,需要使用别名来代替相对路径的引用。
在vue-cli-4中,可以通过配置webpack的resolve.alias来设置别名。在项目的根目录下的vue.config.js文件中,可以添加以下配置:
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
}
}
上述配置将@
设置为项目根目录下的src文件夹的绝对路径。这样,在项目中就可以使用@
来代替相对路径的引用。
例如,如果你想导入src文件夹下的components文件夹中的一个组件,可以这样写:
import MyComponent from '@/components/MyComponent.vue';
这样就可以使用别名@
来代替相对路径,使代码更加简洁和易读。
在使用vue-cli-4时,还可以使用Vue提供的相对路径导入的新特性,即使用./
来代替相对路径。例如:
import MyComponent from './components/MyComponent.vue';
这样也可以实现相对路径的导入。
总结一下,升级到vue-cli-4后,相对路径在标准导入中不再有效,可以通过设置别名或使用./
来代替相对路径的引用。这样可以更好地管理和组织项目中的模块和组件。
领取专属 10元无门槛券
手把手带您无忧上云