Vue2项目配置@指向src路径方式

 更新时间:2022年12月08日 16:16:33   作者:£白昼の星☆  
这篇文章主要介绍了Vue2项目配置@指向src路径方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue2项目配置@指向src路径

这样配置的好处:

1 简写路径 避免使用相对路径时层次混乱导致书写错误

2 方便移动文件

1找到项目的 vue.config.js 文件

2 这里的配置

const { defineConfig } = require('@vue/cli-service')
 
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,// 关闭Eslint语法检查
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
  },
  
})

3 配置好之后重新运行项目就可以使用@符

import '@/style/sass/global.scss' // global css

Vue配置根目录(用@代替src)

今天发现了一个项目中的路径中有@

比如:

import { getList } from '@/api/table'

又或者

import router from '@/router'

学识尚浅的我就看不懂了,但是懵懵懂懂又觉得肯定是哪里配置过了,@肯定是代替了路径的一些东西

知识点

其实多看几个文件就会发现了,@代替了src目录

看出来代替了什么其实不难,难点主要是怎么去配置它

配置

1、如果path模块,则先需要npm引入

npm  install  path  --save

2、配置jsconfig.js

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

3、配置vue.config.js

方法一:(我看的项目用的)

// 配置configureWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
 
module.exports = {
  configureWebpack: {
    name: 'vue Element Admin',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

方法二:

// 配置chainWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
  
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
    }
}

总结

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

相关文章

  • Vue的computed计算属性你了解吗

    Vue的computed计算属性你了解吗

    这篇文章主要为大家详细介绍了Vue的computed计算属性,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • vue之封装多个组件调用同一接口的案例

    vue之封装多个组件调用同一接口的案例

    这篇文章主要介绍了vue之封装多个组件调用同一接口的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vite项目无法使用zangodb包装器的解决方案

    vite项目无法使用zangodb包装器的解决方案

    vite作为新一代工具链,具有很多便利之处,配置也非常简单,它很好地整合了Rollup和其他复杂的构建项,并提供了多种方向的典型脚手架模板,深受大家喜爱,本文给大家介绍了如何解决vite项目无法使用zangodb包装器的问题,需要的朋友可以参考下
    2023-10-10
  • web前端vue filter 过滤器

    web前端vue filter 过滤器

    vue的过滤器通常用在一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。本文给大家介绍了web前端vue filter 过滤器的相关知识,感兴趣的朋友一起看看吧
    2018-01-01
  • vue-quill-editor插入图片路径太长问题解决方法

    vue-quill-editor插入图片路径太长问题解决方法

    这篇文章主要介绍了vue-quill-editor插入图片路径太长问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue Echarts实现可视化世界地图代码实例

    Vue Echarts实现可视化世界地图代码实例

    这篇文章主要介绍了Vue Echarts实现可视化世界地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue样式绑定的几种实现方式

    Vue样式绑定的几种实现方式

    这篇文章主要介绍了Vue样式绑定的几种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue-CLI与Vuex使用方法实例分析

    Vue-CLI与Vuex使用方法实例分析

    这篇文章主要介绍了Vue-CLI与Vuex使用方法,结合实例形式分析了Vue-CLI创建项目与Vuex相关概念、使用方法及操作注意事项,需要的朋友可以参考下
    2020-01-01
  • Vue3子组件watch无法监听父组件传递的属性值的解决方法

    Vue3子组件watch无法监听父组件传递的属性值的解决方法

    这篇文章主要介绍了Vue3子组件watch无法监听父组件传递的属性值的解决方法,文中通过代码示例讲解的讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-10-10
  • Vue组件实现旋转木马动画

    Vue组件实现旋转木马动画

    这篇文章主要为大家详细介绍了Vue组件实现旋转木马动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07

最新评论