如何对相对路径设置，步骤方法是什么-群英

上一篇：JS怎样实现扁平数据与tree转换，方法是什么下一篇：VUE递归实现树形组件的代码是什么，要点有哪些

这篇文章主要讲解了“如何对相对路径设置，步骤方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何对相对路径设置，步骤方法是什么”吧！

@ ~ 相对路径路径别名设置

./这是相对路径的意思，同级目录。
../上级目录。
@/这是webpack设置的路径别名。在build/webpack.base.conf这个文件里面设置了@具体指的是什么

在build/webpack.base.conf里找到如下

resolve: {
    extensions: ['.js', '.vue', '.json'],//取消后缀  引入文件路径就不用加文件后缀了
    alias: {
      'vue$': 'vue/dist/vue.esm.js', //引入vue
      '@': resolve('src'),
      'asd': resolve('src/components/children'), //自己新建 要从src开始写文件路径
    }
  },

使用 import heads from '@/components/children/heads'就不用频繁的使用./和../了，而是利用@直接定位到了src目录。

或者 import heads from 'asd/heads'

另外：在组件中，我们会引用一些静态文件，即static下的文件，这时我们就不能用上面这些相对路径了的配置了，而必须使用一般的路径方式方式。

项目设置src相对路径为@

第一步创建vue.config.js文件

第二步添加代码

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {},
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src')),
      .set('@u', resolve('src/utils')),
      "@c": resolve("src/components"),
        "@v": resolve("src/pages"),
        "@s": resolve("src/static"),
        "@u": resolve("src/utils")

  }
}

关于“如何对相对路径设置，步骤方法是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。