vue2.x配置@指向src三种方法

一、方式一：在项目根目录创建文件jsconfig.json

• 在项目根目录创建文件 jsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

二、方式二：vue.config.js配置chainWebpack

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
 
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("base", resolve("baseConfig"))
      .set("public", resolve("public"));
  },
}

三、方式三：vue.config.js配置configureWebpack

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        // eslint-disable-next-line no-undef
        '@': resolve('src'),
      },
    },
  },
}

四、 @在style中使用注意事项

@指向的是src目录，且只能在<template></template>和<script></script>中使用，在<style></style>中使用会报错。

4.1. ~@的使用

以~开头的url，其后的任何内容都会作为一个模块请求被解析，即使是相对路径。也就是说，加上~前缀的url可以在任意地方使用，甚至可以引用node资源。

<style>
    .bg-img {
        background: url("~@/assets/images/logo.png");
    }
</style>

五、vue中~@和@的区别

vue中~@和@的区别