Vue中配置@作为src根路径

在跟src同级的根路径下找到vue.config.js中作如下配置：

use strict
const path = require(path)

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

const name = 学生信息管理系统 // page title
module.exports = {
    publicPath: /,
    outputDir: dist,
    assetsDir: static,
    configureWebpack: {
        // provide the apps title in webpacks name field, so that
        // it can be accessed in index.html to inject the correct title.
        name: name,
        resolve: {
            alias: {
                // 设置@/的意义
                @: resolve(src)
            }
        }
    }
}

注意vue.config.js是vue-cli3的一个配置文件，新建的项目可能不会有这个文件，需要手动创建。

配置完成之后，就可以在vue中使用@作为src的根路径配置，如下：

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

注意在vue文件，style的css中不能使用@来获取路径，CSS loader 会把把非根路径的url解释为相对路径， 加~前缀才会解释成模块路径（~@代表根路径），例如：

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