在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:
import userinfo from '../../../components/userinfo.vue';
使用../引用的路径比较深,定位路径和书写不方便,并且不直观。
由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。
在webpack.base.config.js找到resolve节点,配置别名如下:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'@components': path.resolve(__dirname, '../src/components')
}
},
不同组件之间引用,如上面的示例:
import userinfo from '@components/userinfo.vue';
CSS loader 会把把非根路径的url解释为相对路径, 加~前缀才会解释成模块路径。
在使用时加上~,告诉加载器它是一个模块,而不是相对路径。例如:
<img src="~img/navbar/空间分析.png" alt="" />
但是在js中使用相对路径时,不需要加~,例如:
<template>
<img src="~assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
background: url(~asset/images/bg.jpg)
}
</style>
只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么.