广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue如何配置根目录@(引用路径)
  • 482
分享到

Vue如何配置根目录@(引用路径)

2024-04-02 19:04:59 482人浏览 独家记忆
摘要

目录Vue如何配置根目录@Vue配置@作为src根路径Vue如何配置根目录@ 首先:@是在路径访问时使用的,为了减少层级引用。 @这是webpack设置的路径别名,默认指向src。

Vue如何配置根目录@

首先:@是在路径访问时使用的,为了减少层级引用。

@这是webpack设置的路径别名,默认指向src。

旧版本在build/WEBpack.base.conf这个文件里面定义。

新版本在根目录下创建在vue.config.js定义。

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
    baseUrl: './',
    runtimeCompiler: true,
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
    }
}

vue项目中默认定义了@(最常用)和vue$两个别名,如果需要,可以自己添加。

Vue配置@作为src根路径

在跟src同级的根路径下找到vue.config.js中作如下配置:

'use strict'
const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir)
}
 
const name = '学生信息管理系统' // page title
module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'static',
    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')
            }
        }
    }
}

注意vue.config.js是vue-cli3的一个配置文件,新建的项目可能不会有这个文件,需要手动创建。

配置完成之后,就可以在vue中使用@作为src的根路径配置,如下:

<div class="login-center-left">
        <h2><img src="@/assets/loGo.png" />{{ title }}</h2>
      </div>

注意在vue文件,style的CSS中不能使用@来获取路径,CSS loader 会把把非根路径的url解释为相对路径, 加~前缀才会解释成模块路径(~@代表根路径),例如:

background: rgb(73, 123, 199) url("~@/assets/login-bg.png") left center

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

--结束END--

本文标题: Vue如何配置根目录@(引用路径)

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

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

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

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

下载Word文档
猜你喜欢
  • Vue如何配置根目录@(引用路径)
    目录Vue如何配置根目录@Vue配置@作为src根路径Vue如何配置根目录@ 首先:@是在路径访问时使用的,为了减少层级引用。 @这是webpack设置的路径别名,默认指向src。 ...
    99+
    2022-11-13
  • 虚拟主机如何配置根目录路径
    虚拟主机的根目录路径可以通过配置虚拟主机的服务器软件来实现。以下是几种常见的服务器软件的配置方式:1. Apache服务器:可以通过...
    99+
    2023-09-05
    虚拟主机
  • HTML如何引入文件的绝对路径、相对路径、根目录
    本文小编为大家详细介绍“HTML如何引入文件的绝对路径、相对路径、根目录”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML如何引入文件的绝对路径、相对路径、根目录”文章能帮助大家解决疑惑,下面跟着小编...
    99+
    2022-10-19
  • SpringBoot如何根据目录路径生成接口的url路径
    目录根据目录路径生成接口的url路径配置文件application.proprties如下springboot接口请求界面路径返404接口没被扫描到配置或代码写法问题最后根据目录路径...
    99+
    2022-11-12
  • vue配置根目录详细步骤(用@代表src目录)
    目录简介根目录的用法在Vue中的JS里使用在Vue文件的CSS里使用vue cli3及之后的配置步骤1:配置jsconfig.js步骤2:配置vue.config.jsvue cli...
    99+
    2022-11-13
  • Nginx如何配置根据路径转发详解
    目录先谈理解:1.nginx基本概念2.常用命令以及配置文件3.nginx配置实例之反向代理4.nginx配置实例之负载均衡5.nginx配置实例之动静分离6.nginx配置高可用集...
    99+
    2022-11-13
  • vue如何设置文件引用路径别名
    这篇文章主要为大家展示了“vue如何设置文件引用路径别名”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何设置文件引用路径别名”这篇文章吧。设置文件引用路...
    99+
    2022-10-19
  • vue如何实现配置@绝对路径
    目录如何配置@绝对路径第一种 直接使用@第二种 webpack.base.conf.js第三种 vue.config.js配置vue路径写法:./ 和 @/项目中还有常见的@用法如何...
    99+
    2022-11-13
  • 如何从PHP 获取绝对路径、文档根目录、基本 URL
    根据您的服务器配置,获取正确的路径信息可能具有挑战性。例如,PHP 并没有直接提供一个变量来返回站点基本 URL。以下是一些代码片段,可以帮助您获取绝对路径、文档根目录和基本 URL。 获取绝对路径 ...
    99+
    2023-10-19
    php android 开发语言 typescript javascript java ubuntu
  • 解决vue-cli配置资源引用的绝对路径问题
    1、在vue项目中,我们经常需要引用图片等资源,每次用相对路径来说太麻烦 2、于是将要解决在vue-cli下搭建的项目配置绝对路径的位置 配置如下: 在项目中的build文件夹下的...
    99+
    2022-11-13
  • 如何在Java中正确配置类路径和索引?
    在Java应用程序中,类路径和索引是非常重要的概念。正确配置类路径和索引可以确保应用程序能够正确地加载所需的类和资源文件。这篇文章将介绍如何在Java中正确配置类路径和索引。 一、类路径 类路径是Java虚拟机(JVM)用来搜索类文件和资源...
    99+
    2023-09-01
    load path 索引
  • SpringBoot如何根据目录结构自动配置Url前缀
    这篇文章主要为大家展示了“SpringBoot如何根据目录结构自动配置Url前缀”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“SpringBoot如何根据目录结构自动配置Url前缀”这篇文章吧。...
    99+
    2023-06-25
  • vite中如何使用@ 配置路径别名
    目录vite使用@ 配置路径别名vite配置别名@以及别名输入提示配置别名别名提示vite使用@ 配置路径别名 报错 Cannot find module 'XXXXXX &...
    99+
    2022-12-08
    vite使用@ vite配置路径别名 vite路径别名
  • vue如何新建项目并配置标准路由
    这篇文章给大家分享的是有关vue如何新建项目并配置标准路由的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。配置路由所有用到的地方总共四步或者说四处1.index.js(src--r...
    99+
    2022-10-19
  • Django如何在配置中使用相对路径
    这篇文章主要介绍了Django如何在配置中使用相对路径,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在配置中使用相对路径某些原因使得项目可能...
    99+
    2022-10-19
  • vuecli4中如何配置打包使用相对路径
    目录配置打包使用相对路径vue打包时的publicPath,就是打包后静态资源的路径情况一情况二情况三配置打包使用相对路径 使用vuecli4进行项目打包时,默认使用的是根目录的方式...
    99+
    2022-11-13
  • 如何在 Linux 上配置 PHP 路径以使用 Laravel?
    在Linux上使用Laravel需要配置PHP路径,否则Laravel将无法正常工作。本文将介绍如何在Linux上配置PHP路径以使用Laravel。 第一步:确定PHP路径 首先,需要确定PHP的路径。可以通过在终端中运行以下命令来确定P...
    99+
    2023-06-13
    path laravel linux
  • 如何解决vue项目使用font-awesome,build后路径的问题
    这篇文章主要介绍如何解决vue项目使用font-awesome,build后路径的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!问题: 项目在本地run情况下显示正常,在buil...
    99+
    2022-10-19
  • vue项目中如何通过cdn引入资源并配置详解
    目录概念作用引用资源及配置1、引入2、配置3、在main.js文件中去除原来的引用总结概念 cdn(内容分发网络)是一种通过互联网相互连接的电脑网络系统,当用户向cdn链接请求资源时...
    99+
    2022-11-13
  • react项目中如何使用插件配置路由
    本篇内容介绍了“react项目中如何使用插件配置路由”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!react路由中没有安全守卫推荐使用插件完...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作