Vue3+TS——使用@代替src路径中的../

使用@代替src路径中的../

安装path

npm install path --save

找到vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import postcssImport from "postcss-pxtorem"
import { resolve } from 'path'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: "./src/mock/source", // 解析，路径可根据实际变动
      localEnabled: true // 此处可以手动设置为true，也可以根据官方文档格式
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  // 打包dist
  base: process.env.NODE_ENV === 'production' ? './' : '/',
// 引入路径
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      'views': resolve(__dirname, 'src/views'),
      'utils': resolve(__dirname, 'src/utils'),
    },
  },


  server: {
    host: '192.168.1.195'
    // 0.0.0.0
  },

  // 适配
  css: {
    postcss: {
      plugins: [
        postcssImport({
          rootValue: 37.5,
          propList: ['*'],
        })
      ]
    }
  }
})