Vue為文件目錄設置別名

cli-4的腳手架配置

因為組件的引用，經常會遇到import * from  '../../../components/common/***.vue‘這樣的引入格式，太復雜了，所以可以在vue里面配置路徑別名

首先在最外層，和package.json同級目錄里面新建一個vue.config.js作為擴展配置。

我的目錄結構：

 

 

 

vue.config.js：關鍵代碼：黑體加粗部分

const path = require('path');
module.exports = {
  outputDir: 'docs',
  configureWebpack: {
    devServer: {
      open: true,
      // 代理
      proxy: {
        '/netease-api': {
          target: 'http://localhost:3000',
          pathRewrite: {
            '/netease-api': ''
          },
          changeOrigin: true,
          secure: false
        }
      }
    },
    resolve: { // 別名
 alias: { '@': path.resolve(__dirname, './src'), assets: path.resolve(__dirname, './src/assets'), components: path.resolve(__dirname, './src/components'), style: path.resolve(__dirname, './src/style'), utils: path.resolve(__dirname, './src/utils') } }
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "~@/style/variables.scss";
          @import "~@/style/mixin.scss";
        `
      }
    }
  }
};

引用的時候就可以這樣寫了：

@代表 src 目錄

比如我的路由文件：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Index from '@/layout/index.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  }
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
];

const router = new VueRouter({
  routes
});

export default router;