vue项目配置路径别名

基于vue/cli3.0+脚手架搭建Vue项目(03)

---

---

前言

更方便的设置路径的引用

一、配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
  }
})
// 或者
// module.exports ={
//   chainWebpack: (config) => {
//     config.resolve.alias
//       .set('@', resolve('src'))
//   }
// }

添加的三个代码块分别是：

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
  }

二、验证别名

借用上个篇章的路径来示范

const demo = [
  {
    name: "index",
    path: "/index",
    component: () => import("@/views/demo"),
  },
];
export default demo;

重启运行

总结

如果你有梦想的话，就要去捍卫它。那些一事无成的人想告诉你你也成不了大器。如果你有理想的话，就要去努力实现。–《当幸福来敲门》