vue相对路径与路径别名如何设置

这篇文章主要介绍“Vue相对路径与路径别名如何设置”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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")  }}

关于“vue相对路径与路径别名如何设置”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。