vue--配置根目录(用@代表src目录)

原文网址：vue--配置根目录(用@代表src目录)_IT利刃出鞘的博客-CSDN博客

简介

        本文介绍vue如何配置根目录（用@代表src目录）。

概述

        vue通常会用@来代表项目的src目录。这样一来，输入路径时就不用输入/src了，可以直接用@来替换。

        例如：有一个vue文件，路径为：/src/layout/index.vue，如下图所示：

如果直接导入，则代码应该这么写：

import Layout from '/src/layout'

如果使用@来替换，就更简洁了：

import Layout from '@/layout'

配置方法

        需要注意的是，默认情况下是不能用@代替/src的，需要经过配置才可以。配置方法如下：

情景1：vue cli3及之后

vue.config.js（位置：项目根目录/vue.config.js）

法1：配置chainWebpack

'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)

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

法2：配置configureWebpack

'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  configureWebpack: {
    name: 'vue Element Admin',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

情景2：vue cli2

webpack.base.conf（位置：项目根目录/config/webpack.base.conf）

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        '#'：resolve('statis')
    }
}