zoukankan      html  css  js  c++  java
  • 基于webpack的vue项目路径别名

    在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';

    这样引用就一目了然。

    作者:南珂丶一梦
    如果你觉得本文还可以,那就点击一下推荐,让更多人看到吧!
    限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。
  • 相关阅读:
    Excel Formulas-Vlookup
    C#字符串与unicode互相转换
    string.IsNullOrWhiteSpace
    CREATE SEQUENCE sqlserver
    error CS1056
    WebExceptionStatus
    运维踩坑记
    C# 快捷命令
    sqlserver2019安装教程
    sql server 数据库mdf文件和log文件过大问题
  • 原文地址:https://www.cnblogs.com/leeke98/p/9019449.html
Copyright © 2011-2022 走看看