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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16172489.html
未经授权禁止转载,违者必究!