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
  })
}