Vue

2024-07-16 10:47| 来源: 网络整理| 查看: 265

在开发vue的项目中，我们肯定需要对路径进行配置，因为在各个文件中，导入文件什么的，使用./、和 ../这种格式的相对路径，就比较的烦，要对路径的结构相当的熟悉，而且难以维护。所以我们就要去设置别名（alias）

配置

1) 创建vue.config.js文件

在原始目录下创建vue.config.js文件，即此文件与package.json文件同级

2) 在vue.config.js中编写配置代码

const path = require('path')// 引入path模块 function resolve (dir) { return path.join(__dirname, dir)// path.join(__dirname)设置绝对路径 } module.exports = { chainWebpack: (config) => { // 给路径起别名 config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/assets')) .set('components', resolve('src/components')) .set('views', resolve('src/views')) }, };

set：第一个参数：设置的别名，第二个参数：对应的路径

3)修改配置文件后，需要重新编译

npm run serve 使用

1) 在html，css代码中：要在路径前添加波浪线’~’ 否则会报错

background: url("~assets/images/banner01.png") center no-repeat;

2) 在js代码中：不用添加波浪线直接使用

import Index from '@/pages/home/index.vue'

记录自己的成长，也希望能帮助到大家少走弯路，期待你的点赞支持💫！

【本文地址】

公司简介

联系我们