动态路径

  1. <script>
  2. //一般相对路径
  3. import tabber from './components/common/Tabbar/tabber.vue';
  4. //别名路径,@为src,这样更灵活
  5. import tabber from '@/components/common/Tabbar/tabber.vue';
  6. </script>

别名路径

在Vue Cli 4.0+里面设置,可以直接在vue.config.js里面,输入代码

  1. const path = require('path');//引入path模块
  2. function resolve(dir){
  3. return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
  4. }
  5. module.exports={
  6. chainWebpack:(config)=>{
  7. config.resolve.alias
  8. .set('@',resolve('./src'))
  9. .set('components',resolve('./src/components'))
  10. .set('views',resolve('src/views'))
  11. .set('assets',resolve('src/assets'))
  12. //set第一个参数:设置的别名,第二个参数:设置的路径
  13.     
  14. }
  15. }

在template中使用

image.png