iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何实现配置@绝对路径
  • 654
分享到

vue如何实现配置@绝对路径

2024-04-02 19:04:59 654人浏览 八月长安
摘要

目录如何配置@绝对路径第一种 直接使用@第二种 webpack.base.conf.js第三种 Vue.config.js配置vue路径写法:./ 和 @/项目中还有常见的@用法如何

如何配置@绝对路径

第一种 直接使用@

vue项目中默认定义了@(最常用)和vue$两个别名 , @这东西代表着到src这个文件夹的路径,

下面所属目录可以直接 @/views @/components @/store @/router @/assets

    ├── vue.config.js 
    ├── package.JSON 
    ├── babel.config.js 
    ├── public
        └──index.html 
    ├── src         
        └── assets
        └── components
        └── store
        └── router
        └── view
        └── app.vue
        └── main.js

第二种 WEBpack.base.conf.js

在vue项目开发中经常引用JS、CSS、IMG文件。当项目较大时文件层级很多,导致路径很长,我们可以通过在bulid > webpack.base.conf.js 设置简便的引用路径

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // add assets路径   给src/assets设置引用路径 assets  使用就是  "~assets"
      'assets': resolve('src/assets'),      
     //  add static路径  给static设置引用路径 static  使用就是 "~static"
      'static': path.resolve(__dirname, '../static'), 
  },

注意事项,设置好引用路径,必须要重启项目才能生效。不然会报错 配置JS、CSS文件同样操作

第三种 vue.config.js配置

项目中使用引入文件有时候路径比较深,需要使用"…/…/…/xx.js"这种类似的路劲引入,这种方式比较笨,可以使用webpack的别名alias配置来解决。

首先,先确定node_modules项目中是否有path模块, 如果没有path模块需要先安装path

npm install path --save

以下为vue.config.js配置

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

vue路径写法:./ 和 @/

vue在引用路径的时候可以用 ./ 的写法引用如下:

import './api/index'

这个代表在相同文件下绝对路径的意思。

项目中还有常见的@用法

import Background from '@/assets/images/background.jpg'

这个@是在 webpack.base.conf.js (vue.config.js)文件里配置的:

configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        '@crud': resolve('src/components/Crud')
      }
    }
  },

这里的@就代表是 src,所以就在 src 路径下找文件,也可以自己配置,这也是常见的路径写法!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何实现配置@绝对路径

本文链接: https://www.lsjlt.com/news/168142.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何实现配置@绝对路径
    目录如何配置@绝对路径第一种 直接使用@第二种 webpack.base.conf.js第三种 vue.config.js配置vue路径写法:./ 和 @/项目中还有常见的@用法如何...
    99+
    2024-04-02
  • jdk环境变量如何配置win10绝对路径
    本篇内容介绍了“jdk环境变量如何配置win10绝对路径”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!小编的回答: 绝对路径是指目录下的绝对...
    99+
    2023-07-01
  • windows绝对路径和相对路径如何写
    今天小编给大家分享一下windows绝对路径和相对路径如何写的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。绝对路径和相对路径...
    99+
    2023-07-02
  • php如何将相对路径转换为绝对路径
    这篇文章主要讲解了“php如何将相对路径转换为绝对路径”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php如何将相对路径转换为绝对路径”吧!在PHP中,可以利用realpath()函数将相对...
    99+
    2023-06-30
  • 解决vue-cli配置资源引用的绝对路径问题
    1、在vue项目中,我们经常需要引用图片等资源,每次用相对路径来说太麻烦 2、于是将要解决在vue-cli下搭建的项目配置绝对路径的位置 配置如下: 在项目中的build文件夹下的...
    99+
    2024-04-02
  • 如何在python中处理绝对路径和相对路径
    如何在python中处理绝对路径和相对路径?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。python有哪些常用库python常用的库:1.requesuts;2.scrapy;...
    99+
    2023-06-14
  • vue中引入绝对路径报错如何解决
    本篇内容介绍了“vue中引入绝对路径报错如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue中引入绝对路径报错的解决办法:1、使用“...
    99+
    2023-07-05
  • vue相对路径与路径别名如何设置
    这篇文章主要介绍“vue相对路径与路径别名如何设置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue相对路径与路径别名如何设置”文章能帮助大家解决问题。@ ~ 相对路径 路径别名设置./这是相对路...
    99+
    2023-06-30
  • php如何转换成绝对路径
    这篇文章主要介绍php如何转换成绝对路径,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!php转换成绝对路径的实现方法:1、创建一个PHP示例文件;2、通过“function sub_rel2abs(string $i...
    99+
    2023-06-21
  • python中如何判断路径是否为绝对路径
    python中判断路径是否为绝对路径的方法:1、在win操作系统中找到python程序目录;2、打开idle工具;3、在idle中新建一个shell脚本;4、输入“import os”指令导入os模块;5、通过“os.path.isabs(...
    99+
    2024-04-02
  • 使用SpringBoot设置虚拟路径映射绝对路径
    目录SpringBoot 设置虚拟路径映射绝对路径下面我们就来代码实现下springboot打war包图片的虚拟路径映射在html图片的路径如图然后要映射到阿里云Linux服务器上路...
    99+
    2024-04-02
  • Java如何实现动态获取文件的绝对路径
    本文小编为大家详细介绍“Java如何实现动态获取文件的绝对路径”,内容详细,步骤清晰,细节处理妥当,希望这篇“Java如何实现动态获取文件的绝对路径”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。前言我们知道在 J...
    99+
    2023-07-05
  • linux如何获取文件绝对路径
    在Linux中,有几种方法可以获取文件的绝对路径:1. 使用`pwd`命令:在文件所在的目录中执行`pwd`命令,将显示当前工作目录...
    99+
    2023-09-15
    linux
  • Vue项目如何获取本地文件夹绝对路径
    目录一、前端代码1.弹框样式代码2.导入方法(不要忘记了导入方法和data定义)3.方法区代码4.api接口中的config.js代码二、后端代码controller层代码servi...
    99+
    2023-01-28
    Vue本地文件夹 Vue绝对路径 Vue路径
  • HTML如何引入文件的绝对路径、相对路径、根目录
    本文小编为大家详细介绍“HTML如何引入文件的绝对路径、相对路径、根目录”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML如何引入文件的绝对路径、相对路径、根目录”文章能帮助大家解决疑惑,下面跟着小编...
    99+
    2024-04-02
  • GO语言API开发:如何处理相对路径和绝对路径?
    在GO语言API开发中,处理相对路径和绝对路径是一个非常重要的问题。在本文中,我们将介绍如何使用GO语言处理这些路径,以及如何在代码中演示它们。 首先,我们需要了解什么是相对路径和绝对路径。相对路径是相对于当前目录的路径,而绝对路径是从根...
    99+
    2023-11-13
    api 文件 path
  • python中如何获取文件绝对路径
    python中获取文件绝对路径的方法:1、在win操作系统中找到python程序目录;2、打开idle工具;3、在idle中新建一个shell脚本;4、输入“import os”指令导入os模块;5、通过“os.path.abspath(文...
    99+
    2024-04-02
  • vue如何实现在data里引入相对路径
    这篇文章主要介绍“vue如何实现在data里引入相对路径”,在日常操作中,相信很多人在vue如何实现在data里引入相对路径问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue如何实现在data里引入相对路径...
    99+
    2023-06-30
  • vue项目中使用axios遇到的相对路径和绝对路径问题
    目录使用axios遇到的相对路径和绝对路径问题1.设置全局baseURL2.覆盖baseURLaxios设置访问基础路径在main.js 做如下配置可能会遇到下面的报错使用axios...
    99+
    2024-04-02
  • Vue如何配置根目录@(引用路径)
    目录Vue如何配置根目录@Vue配置@作为src根路径Vue如何配置根目录@ 首先:@是在路径访问时使用的,为了减少层级引用。 @这是webpack设置的路径别名,默认指向src。 ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作