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

简介: 使用@代替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: ['*'],
        })
      ]
    }
  }
})

ab0409273cc24fa6b47b1106caf457c3.png

相关文章
|
3天前
|
缓存 JavaScript 前端开发
Vue 3的响应式系统
【5月更文挑战第31天】Vue 3的响应式系统
8 1
|
4天前
|
JavaScript 前端开发 API
vue2 /vue3【nextTick】的使用方法及实现原理,一文全搞懂!
vue2 /vue3【nextTick】的使用方法及实现原理,一文全搞懂!
|
4天前
|
JavaScript 开发者
[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法
[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法
[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法
|
4天前
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
|
11天前
|
JavaScript API
Vue3 基础语法
该内容介绍了Vue项目的创建和Vue3的语法、响应式API、生命周期、组件通信及跨组件通信方法。包括使用`npm init vue@latest`创建项目,`npm install`初始化,Vue3的`setup`语法,`reactive`、`ref`、`computed`和`watch`的用法,生命周期图解,以及父子组件间的数据传递。此外,还提到了Vue3中使用`provide`和`inject`进行跨层数据传递,以及通过Pinia库进行状态管理。
36 0
Vue3 基础语法
|
14天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
23 0
|
14天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
29 3
|
17天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
29 0
|
17天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
17天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
28 0