【vue】路径别名

最新推荐文章于 2024-09-18 21:46:07 发布
最新推荐文章于 2024-09-18 21:46:07 发布
阅读量285 收藏
点赞数
分类专栏： vue.js 文章标签： vue alias webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangbai01_/article/details/102804377
版权

在webpack.base.conf.js 里边resolve，设置alias：
 

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

},

例如：默认有'@': resolve('src'),

相当于一个语法糖，@就相当于src文件

使用：

import header from '@/components/header'

表示src文件夹下的components里边的header组件 

当白
关注
专栏目录
vue中的路径和路径别名
kfgauss的博客
06-11 709
图片src路径动态赋值 <img class="thumb" width="200px" height="150px" :src="getThumb(item.type)" /> <script> ... methods: { getThumb(type) { let thumb = { WMS: require("img/world.j...
css vue 路径别名出错
qq_27009517的博客
09-09 654
Module build failed: Error: D:\vue2\gowhere\travel\src\pages\home\components\Header.vue:26:9 22| 23| <style lang='stylus' scope> 24| // css 里的引入要 加 @ ~ 25| 26| @import '@styles/variable.styl' ---------------^ 27| 28| .header 2...
vue.config.js中配置Vue的路径别名的方法
11-20
在官方的vue-cli配置参考中存在一个configureWebpack webpack中有一个配置路径别名的属性 const path = require('path') module.exports = { // 对象和函数都可以，如果要控制开发环境可以选择函数 configureWebpack:{ resolve:{ alias:{ 'assets':path.resolve('./src/assets') } } }
vue路径别名配置
最新发布
Wgq0731的博客
09-18 304
是源代码目录，所以我们经常会使用其内部的组件文件，那么我们就可以将这个./src做成一个模板，，我们可以将他设置为。
vue-路径别名
qinqinde123的博客
10-04 166
一. 前言 每次写引入组件的路径，如果路径嵌套比较深，就会比较麻烦 二. 通过别名简化路径 1. 在build下的webpack.base.conf.js给路径定义别名 2. 别名使用 1）在src中使用别名需要带前缀“~” 2）在组件进入的时候，直接使用 ...
路径别名
weixin_33743880的博客
01-24 205
Yii中文件导入除了include和requrie外，还可以用路径别的方式导入文件，假如extension目录下有个Person的类文件，可以这样导入Yii::import('ext.Person'); 路径别名默认有3种，application指的是protected目录，webroot指的是项目根目录,ext指的是extension目录，目录与文件之间用符号点'.'连接 通过路径别名获取路...
vue中路径别名
zyue_1217的博客
07-11 91
vue中路径别名
vue中给路径起别名
qq_46112274的博客
03-08 2194
1、在webpack.base.conf.js配置文件中给路径起别名 2、在vue文件中使用别名 2.1、在import中使用@ 2.2、在dom中使用别名（~） 3、修改了vue的配置文件，要重新npm run dev 正常访问
vscode中Vue别名路径提示的实现
11-19
当使用 Vue 框架进行项目开发时，在 vue.config.js 中配置好了路径别名后，到其他页面引入组件、引入 css 、引入静态文件路径时，使用路径别名不会智能提示路径。虽然在 vscode 中安装了Path Intellisense 插件，...
Vue CL3 配置路径别名详解
10-16
在 Vue CLI 3 中，配置路径别名可以通过 `vue.config.js` 文件实现。 首先，我们需要了解 `vue.config.js` 文件。这是一个可选的配置文件，位于项目根目录下，用来覆盖默认的配置。如果没有这个文件，Vue CLI 会...
vue为路径设置别名
stone_tomcate的博客
09-10 779
1. 为路径设置别名 在开发过程中，我们经常需要引入各种文件，如图片、CSS、JS等，为了避免写很长的相对路径（../），我们可以为不同的目录配置一个别名。 在vue.config.js中的chainWebpack中配置 config.resolve.alias.set('@', resolve('src')).set('_c', resolve('src/components')); ...
vue项目配置路径别名
weixin_46719229的博客
08-13 210
vue.config.js配置路径别名及具体使用方法 配置代码 module.exports = { configureWebpack: { resolve: { alias: { // '@': 'src' 内部已经配置了这个 'assets': '@/assets', 'components': '@/components', '
vue中配置路径别名
大把小米的博客
06-28 378
在vue.config.js中配置 1.先在顶部引入path模块 const path = require('path'); 2.在module.exports 里面 module.exports = { // 配置路径别名 chainWebpack: (config) => { config.resolve.alias.set('@', resolve('src')).set('@assets', resolve('src/assets')) } } 3.
三、Vue中设置路径别名
panchang199266的博客
05-12 5586
一：问题   在 CSS 或者 JS 中，有时候需要引入其他相关文件，若目录层级比较多，那么路径会相当长，而且重复书写，比较麻烦。为了解决这个问题，我们可以采用为路径设置别名的方式，来简化路径书写。 二：设置别名步骤 下例是使用 vue-cli3.0构建项目，步骤如下： 1.新建 vue.config.js 文件，和package.json同层级 const path = require('pat...
vue替换别名（路径别名）
qq_50952645的博客
05-22 206
vue项目中 使用路径别名：@和~的区别
u013158317的博客
04-30 1897
首先：@和~ 都是在路径访问时使用的。 1. @ 使用说明 @这是webpack设置的路径别名。 在build/webpack.base.conf这个文件里面定义。 vue项目中默认定义了@（最常用）和vue$两个别名，如果需要，可以自己添加。 默认定义：@这东西代表着到src这个文件夹的路径 ...
vue如何配置路径别名
04-08
可以在vue.config.js文件中配置路径别名。在该文件中添加如下代码： ``` 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('utils', resolve('src/utils')) } } function resolve(dir) { return path.join(__dirname, dir) } ``` 其中，alias设置了别名，resolve函数用于获取绝对路径。这样，在代码中就可以使用别名来引用模块，比如： ``` import HelloWorld from '@/components/HelloWorld.vue' ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值