~有老师说说这个符号是在引用时规定添加的，但是这节课里import"pages' 这里没添加啊？

lcyjerry 2020-05-06

收起

2回答

卡布琦诺 2020-05-06 18:21:39

同学你好，@import后面的@是webpack的路径别名，@ 等价于 /src 这个目录，作用是避免写麻烦又易错的相对路径，相关代码也是定义在配置文件webpack.base.config里，如下：

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

希望可以帮到你，祝学习愉快！

收起回答

提问者 lcyjerry #1

alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'assets': resolve('src/assets'), 'base': resolve('src/base'), 'components': resolve('src/components'), 'pages': resolve('src/pages') } 我这里也配置了啊，还需要加~吗？

2020-05-06 19:51:37
卡布琦诺回复提问者 lcyjerry #2

同学你好，这个需要根据整体的代码环境来看，目前阶段，建议根据视频中老师的代码来书写即可。祝学习愉快！

2020-05-07 09:45:25
提问者 lcyjerry 回复卡布琦诺 #3

那我配置了为什么还需要加~ 我不加~还是不行

2020-05-07 11:12:44

点开查看后面4条评论

卡布琦诺 2020-05-06 17:58:29

同学你好，~指的是@import 后面的波浪号~么？这个~关于路径配置的，比如：

正常vue中写法如下：

@import '../../../../assets/css/varibles.scss'

可以简写为以下：

@import '~@/assets/css/varibles.scss'

这里的~符号表示后面的值为别名, 然后会去 build/webpack.base.conf.js 的 alias 配置中找相应的值, 然后拼接成最后的地址。

resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}

也可以在 build/webpack.base.conf.js 的 alias 配置自定义字符，比如scss：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss': resolve('src/assets/css'),
    }
  }

然后在 main.js 或者其他组件都可以使用如下方式书写：