Vue3第六篇：配置@根路径，替代../../

1.安装依赖

npm install path --save

2.安装插件Path Intellisense

3.配置提示

vscode中依次点击：文件-首选项-设置-工作区-扩展-path-intellisense

对settings.json进行编辑：将path-intellisense.mappings的值设置如下：

{
    // ...这里你们可能还有其他的一些自定义配置
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }
}

4.配置别名，修改vite.config.js文件：加上别名的配置，（顺便配置一下打包的基础路径以及启动配置【这个可以不配，纯属个人习惯】）

import { defineConfig } from vite
import vue from @vitejs/plugin-vue
import WindiCSS from vite-plugin-windicss
 
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { ElementPlusResolver } from unplugin-vue-components/resolvers

const path = require(path);

// https://vitejs.dev/config/
export default defineConfig({
  base: ./,
  plugins: [
    vue(),
    WindiCSS(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    // 配置路径别名
    alias: {
      @: path.resolve(__dirname, ./src),
    },
  },
  server: {
    host: 0.0.0.0,
    port: 3000, // 端口号
    open: false // 是否自动打开浏览器
  }
})

5.配置路径导航

在项目根目录下，创建jsconfig.json文件，内容如下：

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

6.使用：【注意注意注意：css中背景图片路径要用 ~@】

import request from @/utils/request
 
export function login(data) {
  return request({
    url: /vue-element-admin/user/login,
    method: post,
    data
  })
}