526互联

Vue@路径别名设置

发布时间 2023-06-27 14:40:02作者: 脏猫

路径别名，省去相对路径的麻烦，直接用@views 来作为路径开头更加的方便

Vue2+Vue-Cli 写法

在 vue.config.js 里写入

module.exports = {
  ...
  chainWebpack: config => {
    config.resolve.symlinks(true)
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@components', resolve('src/components'))
      .set('@views', resolve('src/views'))
  }
}

Vue3+Vite+Ts 写法

// vite.config.js
resolve:{
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@V": path.resolve(__dirname, "src/views"),
      "@C": path.resolve(__dirname,"src/components")
    }
  }
}
// tsconfig.json
"paths":{
      "@/*":["./src/*"],
      "@V/*":["./src/views/*"],
      "@C/*":["./src/components/*"]
    }