Vite @ alias path All In One

Vite @ alias path All In One

error

@ alias path

solution

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  resolve:{
    alias:{
      '@' : path.resolve(__dirname, './src')
    },
  },
  plugins: [vue()]
})

https://vueschool.io/articles/vuejs-tutorials/import-aliases-in-vite/

https://stackoverflow.com/questions/66043612/vue3-vite-project-alias-src-to-not-working

https://vitejs.dev/config/#resolve-alias

demo

<template>
  <!-- <>react fragment</> -->
  <!-- <template>vue fragment</template> -->
  <template v-if="true">
    <div>{{store.msg}}</div>
  </template>
  <template v-if="true">
    <div>{{store.getMsg}}</div>
    <!-- <pre>{{jsonString}}</pre> -->
    <pre>❓ {{store.msg}}</pre>
    <span v-pre>{{ this will not be compiled }}❓ {{store.msg}}</span>
    <button @click="updateMsg">Pinia 🍍</button>
  </template>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// import { appStore } from "@/store/index";
// import { appStore } from "../store/index";
// import { useAppStore } from "../store/index";
import { useAppStore } from "@/store/index";
// 实例化 store
// const store = appStore();
const store = useAppStore();
const log = console.log;
log(`store =`, store);

let jsonString = ref('');
const url = `https://cdn.xgqfrms.xyz/json/cat.json`;
// async await
store.fetchData(url).then(json => {
  // console.log('fetchData =', json);
  jsonString.value = JSON.stringify(json, null, 4);
  // console.log('jsonString =', jsonString);
  console.log('jsonString.value =', jsonString.value);
});

// const promise = store.fetchData(url);
// promise.then(json => {
//   console.log('fetchData =', json);
// });

const updateMsg = () => {
  store.$patch({
    msg: "Hello Pinia 🍍!",
  });
  // store.updateMsg('Pinia 🍍');
}
</script>

<style scoped lang="scss">
.className {
  color: #000;
  background: #fff;
}
</style>

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---