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

目录
  • 如何配置@绝对路径
    • 第一种 直接使用@
    • 第二种 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 路径下找文件,也可以自己配置,这也是常见的路径写法!

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

(0)

相关推荐

  • vue中引入路径@的用法及说明

    目录 引入路径@的用法及说明 Vue文件中引用路径的介绍 Vue中使用 vue项目路径使用@的原因 @是webpack设置的路径别名 使用场景 引入路径@的用法及说明 Vue文件中引用路径的介绍 1.路径 ./ ./当前文件同级目录 2.路径 …/ …/当前文件上一级目录 3.@符号 @ 的作用是在你引入模块时,可以使用 @ 代替 /src 目录,避免易错的相对路径. Vue中使用 1. vue.config.js配置文件中使用   chainWebpack(config) {     conf

  • Vue打包路径配置过程

    目录 Vue打包路径配置 1. 配置文件 2. 打包示例(npm/cnpm run build) 解决打包路径配置的问题 问题 原因 解决 Vue打包路径配置 1. 配置文件 module.exports = { // ...... // 相对路径都是相对于index.js所在的目录config开始的 build: { // index,assetsRoot两个路径基本不用改动,只是用于文件打包存放的路径 // index.html的路径 index: path.resolve(__dirnam

  • vue3动态修改打包后的请求路径的操作代码

    在工作中多多少少会遇到这种情况:项目打包之后,可以再次修改请求后端接口的基础地址.这就需要我们创建一个静态资源里的外部文件来实现了. 具体操作实现 public 文件夹就是存放那些不需要打包的文件,可以直接访问(静态资源),在puclic目录下新增config.js文件 window.g = { // 开发环境 development: { BASEURL: 'http://127.0.0.1:4000', VERSION: '0.0.1', MODE: 'development', NODE_

  • vue中的axios配置及接口请求路径api配置

    目录 简介 一.axios配置 二.请求接口路径api配置 三.axios和接口api的全局注入 四.请求接口的使用方式 注意 简介 关于vue中使用axios请求的配置,注意其中区分Vue2.0和Vue3.0的写法. 一.axios配置 由于可能会有多个插件应用,所以有了plugins(utils里面放的是封装的事件处理方法),自行新建相关文件 1.安装axios npm install axios --save 2.‘plugins/index.js’ 配置 // 导出所有插件 let mo

  • vue背景图片路径问题及解决

    目录 vue背景图片路径 vue避坑之背景图片路径的添加 vue背景图片路径 共三种情况: <div class="about" :style="{backgroundImage:'url('+pic+')'}"> <div style="display: inline-block;width:36px;height: 36px;background-size: cover;background-position: center;bord

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

    目录 如何配置@绝对路径 第一种 直接使用@ 第二种 webpack.base.conf.js 第三种 vue.config.js配置 vue路径写法:./ 和 @/ 项目中还有常见的@用法 如何配置@绝对路径 第一种 直接使用@ vue项目中默认定义了@(最常用)和vue$两个别名 , @这东西代表着到src这个文件夹的路径, 下面所属目录可以直接 @/views @/components @/store @/router @/assets     ├── vue.config.js    

  • vue3.0 vue.config.js 配置基础的路径问题

    目录 vue3.0 vue.config.js 配置基础路径 vue3.0+ 3.x config配置 vue3.0 vue.config.js 配置基础路径 在和src同级的路径下创建一个文件名,vue.config.js(这文件名是固定这么写的) 在文件中写入 module.exports = {     baseUrl:'/',//根路径     outputDir:'dist',//打包的时候生成的一个文件名     assetsDir:'assets',//静态资源目录(js,css,

  • Vue axios设置访问基础路径方法

    看过axios的官方文档后配置变得简单: 在main.js 做如下配置: import axios from 'axios' axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web' Vue.prototype.axios = axios 最后一行是将axios配置到Vue原型中,使用方法为: this.axios.get('/test/1').then(function (response) {}) 可能会遇到下面的报错:

  • vue eslint简要配置教程详解

    在前端开发过程中,难免习惯了 console.log . 但是刚入门vue时,基于vue-cli 3.x,运行时终端老抛出error.一看信息,发现是不能使用 console.log ,另外import后的但是没有使用的变量也提示error信息,这是不错的. 1. 修改rules 但的你想去掉console提示?那可以通过 package.json 修改 rules 规则. 在package.json中,有这几其中的一项,在 rules 中添加 "no-console": "

  • vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • vue动态路由配置及路由传参的方式

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 首先我们来了解下router-link这个组件: 简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到 并且当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路

  • Vue+webpack项目配置便于维护的目录结构教程详解

    新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js 配置目录入口文件 import api from './website' // 当前平台 export const HOS

  • Vue结合路由配置递归实现菜单栏功能

    前言 在日常开发中,项目中的菜单栏都是已经实现好了的.如果需要添加新的菜单,只需要在路由配置中新增一条路由,就可以实现菜单的添加. 相信大家和我一样,有时候会跃跃欲试自己去实现一个菜单栏.那今天我就将自己实现的菜单栏的整个思路和代码分享给大家. 本篇文章重在总结和分享菜单栏的一个递归实现方式,代码的优化.菜单权限等不在本篇文章范围之内,在文中的相关部分也会做一些提示,有个别不推荐的写法希望大家不要参考哦. 同时可能会存在一些细节的功能没有处理或者没有提及到,忘知晓. 最终的效果 本次实现的这个菜

  • 使用SpringBoot配置虚拟化路径用于图片的展示

    目录 配置虚拟化路径用于图片的展示 1.首先我们在application.yml文件 2.配置虚拟路径的映射 配置虚拟路径访问本地图片问题 问题 举个例子 配置虚拟化路径用于图片的展示 springboot默认可以访问resources下的static文件夹下的静态资源,我们一般将图片指定上传到static下的某个文件夹 例如images: 开发阶段可以使用,但是当项目打成jar包就无法使用,运行会报出无法找到文件路径.这时候就需要配置虚拟路径,用来指定到硬盘下的固定地址. 1.首先我们在app

  • 超级详细的Vue安装与配置教程

    目录 一.下载和安装Vue 二.创建全局安装目录和缓存日志目录 三.配置环境变量 1. 环境变量---用户变量---选中Path---点编辑 2. 环境变量---系统变量---新建 三.安装vue 1. 安装vue.js 2. 安装webpack模板 3. 安装脚手架vue-cli 4. 安装vue-router 四.我的第一个的 vue-cli应用程序 总结 一.下载和安装Vue 官网下载地址Download | Node.js 选择适合自己的版本,推荐LTS,长久稳定版本. 我这里选择的是W

随机推荐