vue路径

1 ~

 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>

~是默认代表当前项目的更目录，需要在alias里面配置个别名

vue在DOM元素里面用别名需要加~

• vue项目中默认定义了@（最常用）和vue$两个别名，如果需要，可以自己添加。

 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')
        }
    }

注意：~@/assets/scss/_variables.scss 给人的感觉就是 src下面的 assets/scss/_variables.scss; 但是如果在这样去引入样式，会报错。(页面引入图片不使用@前不加~也会报错)