vue中路径别名

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

在webpack.base.conf.js中配置

在这里插入图片描述
在resolve中设置别名

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      'views': resolve('src/views'),
    }
  },

在这里插入图片描述

别名修改之后要重新运行项目

使用

  1. 在页面中import可以直接使用别名
    在这里插入图片描述
  2. 在标签内引用需要添加~

在这里插入图片描述

zyue_1217
关注
专栏目录
Vue项目给相对路径取别名
qq_37635012的博客
05-20 873
我们在vue项目中，经常可能用到相对路径获取图片路径，比如我们都是如下这样写的： <img src="../../../assets/index/logo.png" /> 像这种相对路径引入没错，但维护麻烦，一旦这个文件夹移动一下位置，那这个路径就不对了，而在vue.config.js里我们可以通过配置来解决这一问题： const path = require('path') function resolve(dir) { return path.join(__dirname, dir)
vue 添加路径别名
chpswg的专栏
07-17 1112
在vue-cli项目中的的配置文件vue.config.js中添加路径引用别名 1、引入路径 const path = require('path') 2、添加函数 function resolve(dir) { return path.join(__dirname, dir) } 3、添加别名 resolve: { alias: { ...
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中给路径起别名
qq_46112274的博客
03-08 2194
1、在webpack.base.conf.js配置文件中给路径起别名 2、在vue文件中使用别名 2.1、在import中使用@ 2.2、在dom中使用别名（~） 3、修改了vue的配置文件，要重新npm run dev 正常访问
vue路径别名配置
最新发布
Wgq0731的博客
09-18 304
是源代码目录，所以我们经常会使用其内部的组件文件，那么我们就可以将这个./src做成一个模板，，我们可以将他设置为。
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-路径别名
qinqinde123的博客
10-04 166
一. 前言 每次写引入组件的路径，如果路径嵌套比较深，就会比较麻烦 二. 通过别名简化路径 1. 在build下的webpack.base.conf.js给路径定义别名 2. 别名使用 1）在src中使用别名需要带前缀“~” 2）在组件进入的时候，直接使用 ...
Vue项目路径别名设置
m0_37828249的博客
06-23 8511
用vue-cli搭建好vue项目之后，进入正式开发过程，有时候会发现各种import路径中都存在长串的重复路径，比如：import 'src/assets/styles/reset.css' import 'src/assets/styles/border.css'为了方便维护，可以打开build文件下的webpack.base.conf.js文件，在module.exports中找到resolv...
webpack+vue中使用别名路径引用静态图片地址
08-28
主要介绍了webpack+vue中使用别名路径引用静态图片地址，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuepress-plugin-alias:Vuepress插件可生成别名页面以进行正确的重定向处理
05-04
Vuepress插件别名 Vuepress插件可生成别名页面以进行正确的重定向处理 安装 纱 yarn add vuepress-plugin-alias NPM npm install vuepress-plugin-alias 用法 Vuepress v1.x // .vuepress/config.js module . ...
Vue给文件起别名——使用、报错及解决方法
Wzw的博客
03-12 3439
文件路径引用 在实战开发中，如果需要引用的文件层级很深，我们就可能遇到以下代码：<img src="../../../assets/image/home.icon"/>。 如果后续项目文件路径变化了呢？那么就需要手动去修改每个文件中的路径，在项目初始阶段文件不多时，这样做还有可能；一旦文件增多，这样一个个修改路径就很麻烦。 因此，我们需要在一开始时，就给文件夹起别名，这样不管层级多深或者文件路径更改，之后都直接用这个别名即可。 Vue-Cli3 在vue.config.js（如果没有，则在根目
vue项目配置路径别名
weixin_43697548的博客
04-21 1232
基于vue/cli3.0+脚手架搭建Vue项目(03) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(03)前言一、配置vue.config.js二、验证别名总结 前言 更方便的设置路径的引用 一、配置vue.config.js const { defineConfig } = require('@vue/cli-service') const path = require('path'); function resolve(dir) { return path.join(__dirna
【vue】vue中设置路径别名
Meditation_Crazy
07-01 5518
前言 转载：https://blog.csdn.net/panchang199266/article/details/90145638 在 CSS 或者 JS 中，有时候需要引入其他相关文件，若目录层级比较多，那么路径会相当长，而且重复书写，比较麻烦。为了解决这个问题，我们可以采用为路径设置别名的方式，来简化路径书写。 实现步骤 新建 vue.config.js 文件，和package.json同层级 const path = require('path'); function resolve.
三、Vue中设置路径别名
panchang199266的博客
05-12 5586
一：问题   在 CSS 或者 JS 中，有时候需要引入其他相关文件，若目录层级比较多，那么路径会相当长，而且重复书写，比较麻烦。为了解决这个问题，我们可以采用为路径设置别名的方式，来简化路径书写。 二：设置别名步骤 下例是使用 vue-cli3.0构建项目，步骤如下： 1.新建 vue.config.js 文件，和package.json同层级 const path = require('pat...
vue项目设置路径别名
LRQQHM的博客
05-06 648
方式1： let path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: (config) => { config.resolve.alias.set("@", resolve("src")); }, }; 方式2： let path = require("path"); function resolve
vue替换别名（路径别名）
qq_50952645的博客
05-22 206
【vue】路径别名
当白的技术小窝 ( git : https://github.com/canwhite )
10-29 285
在webpack.base.conf.js 里边resolve，设置alias： resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, 例如：默认有'@': resolve('src'), 相当于一...
vue项目中 使用路径别名：@和~的区别
u013158317的博客
04-30 1897
首先：@和~ 都是在路径访问时使用的。 1. @ 使用说明 @这是webpack设置的路径别名。 在build/webpack.base.conf这个文件里面定义。 vue项目中默认定义了@（最常用）和vue$两个别名，如果需要，可以自己添加。 默认定义：@这东西代表着到src这个文件夹的路径 ...
vue3中路由的重定向和别名
04-04
1. 重定向 在Vue3中，重定向可以通过在路由配置中使用redirect属性来实现。例如，我们要将路径为"/"的路由重定向到"/home"，可以这样配置： ``` const routes = [ { path: '/', redirect: '/home' }, { path: '/home', component: Home } ] ``` 这样当用户访问"/"时，就会自动跳转到"/home"路径。 2. 别名 在Vue3中，别名可以通过在路由配置中使用alias属性来实现。例如，我们要将路径为"/about"的路由设置一个别名为"/aboutus"，可以这样配置： ``` const routes = [ { path: '/about', component: About, alias: '/aboutus' }, ] ``` 这样当用户访问"/about"或"/aboutus"时，都会渲染About组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值