Vue2.6实现去哪儿网 --简化路径

在我们日常的工作中，可能会有文件路径很长的情况出现，有可能要去 static/images 里面引用图片，这时候可能需要很多个 ../ 来跳转到上一级

解决方法(分步):

1.打开 webpack-base-conf.js

2.找到 module.exports 下的 resolve，为alias增加一项：'static': resolve('static'),

module.exports = {
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'styles': resolve('src/assets/styles'),
            'common': resolve('src/common'),
            'static': resolve('static')
        }
    }
}

3.这时我们可以回到需要填写图片路径的页面，并使用 'static' 直接跳转到 static 文件夹的位置

例：

 <img class="user_img" :src="user_img_Url" alt="">

<script>
export default {
  name: 'Swiper',
  data () {
    return {
      user_img_Url: 'static/images/tuijian/003.png'
    }
  }
}
</script>      

注：当我们队webpack-base-conf.js进行过修改后，我们要在命令行工具重新运行 npm run dev 重启服务器才会生效，不然会一直报错