Webpack - @ 和 ~ 区别

@

@这是webpack设置的路径别名。

这东西在vue标准模板里面的 build/webpack.base.conf 这个文件里面。

resolve: { // 路径别名
    alias: { 
        '@': resolve('src'), 
        'vue$': 'vue/dist/vue.esm.js'
    }
}

就是说@这东西代表着到src这个文件夹的路径。

---

~

~这是webpack设置的路径别名，也是 stylus-loader 的东东。

这东西在vue标准模板里面的 build/webpack.base.conf 这个文件里面。

resolve: {
    extensions: ['.js', '.vue'],
    alias: {
        'vue': 'vue/dist/vue.esm.js',
        'components': resolve('src/components'),
        'common': resolve('src/common'),
        'config': resolve('src/config'),
        'views': resolve('src/views')
    }
}

<style scoped lang="scss">
    @import "~common/sass/variables";
    @import "~common/sass/mixin";
    /* ... */
</style>