Vue 中的别名设置与使用（采坑）

您所在的位置：网站首页 › vue配置路径别名 › Vue 中的别名设置与使用（采坑）

Vue 中的别名设置与使用（采坑）

2023-09-20 17:48| 来源: 网络整理| 查看: 265

一、设置

vue.config.js 文件，set 方法，第一个参数是自定义别名，第二个参数是原始路径

module.exports = { // 资源路径简写 chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('@stylus', resolve('src/assets/stylus')) .set('@components', resolve('src/components')) .set('@images', resolve('src/assets/images')) .set('@libs', resolve('public/libs')) } }; 二、使用 1. import

Vue 文件中 script 标签中引入文件

import MapToolbar from "@components/TopHeader.vue"

Vue 文件中 style 标签中引入CSS 文件。注意 import 前面有 @ 别名前面有 ~

@import '~@stylus/base.styl'; 2、require // HTML 标签使用 // js 代码中使用 imgObj.src = require(`@images/header.png`); 3、url()

注意 @ 前面有 ~

.icon-close { content: url('~@images/close.png') }

【本文地址】

Vue 中的别名设置与使用（采坑）

Vue 中的别名设置与使用（采坑）

今日新闻

推荐新闻