vue配置根目录详细步骤(用@代表src目录)

import Layout from '/src/layout'

import Layout from '@/layout'

<div class="login-center-left">
    <h2><img src="@/assets/logo.png" />{{ title }}</h2>
</div>

background: rgb(73, 123, 199) url("~@/assets/login-bg.png") left center

{ 
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  // @ 不能在以下目录的文件中使用
  "exclude": ["node_modules", "dist"]
}

'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
 
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
    }
}

'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
 
module.exports = {
  configureWebpack: {
    name: 'vue Element Admin',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

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