vue路径使用方法及自定义路径介绍

1.首先说根目录

    根目录用“/”

2. 当前文件夹

./当前文件同级目录

3.当前文件夹的上一级

…/当前文件上一级目录

4.自定义目录

说明下 之前的vue是在 webpack.base.conf.js 文件里配置的在这里直接加入就可以

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

现在需要在vue.config.js 这个文件中进行配置

首先要看下有没有这个path模块

如果没有path模块需要先安装path

npm install path --save

安装完成后才能配置

const path = require("path");
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set("@", resolve("src"))
            .set("utils", resolve("src/utils"))
    },
}

完成后就可以简写成

未配置前

使用场景

1. js，也是最为常用的使用场景

2. css，在使用的时候需要加入~，并且不要写成字符串

{
	background: url(~@/static/img/order.jpg);
}

3. html，~ 可加可不加。

<img class="icon" src="@/static/phone.png" alt="绑定手机">
<img class="icon" src="~@/static/phone.png" alt="绑定手机">