Le volar plug-in est installé sans invite.
Solution : 1. Vérifiez s'il s'agit de la dernière version , si oui, entrez les paramètres de l'extension et vérifiez toutes les options.
2. Si cela ne fonctionne toujours pas, vous devez mettre à jour vscoe. En général, une erreur sera détectée dans Licatch. comme neuf
TypeScript Intellisense est désactivé sur le modèle. Pour activer, configurez "jsx": "preserve"dans la "compilerOptions"propriété de tsconfig ou jsconfig. Pour désactiver cette invite à la place, configurez "experimentalDisableTemplateSupport": truedans "vueCompilerOptions"property.volar
Solution :
ouvrez les paramètres jsx.
Si vous installez eslint, il y aura une invite de ligne rouge au début.
Solution :
"vue/multi-word-component-names": "off"
configurer le proxy
vite.config.ts
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://101.43.207.24:1190',
rewrite: (path) => path.replace(/^\/api/, ''),
changeOrigin: true
},
// '/storage/file': {
// target: '目标服务器2'
// }
}
},
})
Une erreur s'est produite dans le fichier de configuration eslint
解决：
'env': { 'browser': true, 'es2021': true, 'node': true }, 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential' ],
vite3.0 distingue différents environnements
Solution : utilisez import.meta.env.VITE_SOME_KEY
le document pour indiquer que seules les variables commençant par VITE_ seront affichées et que les autres ne sont pas définies
La propriété 'env' n'existe pas sur le type 'ImportMeta'.
Ajoutez la configuration suivante dans le fichier tsconfig.json à
"types": [ "vite/client" ]
Moins dans vue3 utilise des variables ts
liaison v
Lorsque js-cookie est actualisé une fois, ajoutez un nouveau jeton au jeton d'origine
Du point de vue des étapes exécutées, actualisez la page une fois. La méthode setTokne encapsulée sera exécutée une fois, vous pouvez donc ajouter l'ancien jugement
import {
defineStore } from 'pinia'
import {
Names } from '../storeNamespace'
import Cookies from 'js-cookie'
const cookiesStorage: Storage = {
setItem (key, state) {
// 加上判断
if (Cookies.get('token')) return
return Cookies.set('token', state, {
expires: 3 })
},
getItem (key) {
return JSON.stringify({
token: Cookies.get('token')
})
}
}
// import {UserInfo} from '@/@type/store'
// Names.User 就是本地存储的名称
export const useStore = defineStore(Names.User, {
state: () => {
return {
token: '',
table: [] as Array<number>
}
},
persist: {
enabled: true, // 开启存储
// **strategies: 指定存储位置以及存储的变量都有哪些,该属性可以不写，不写的话默认是存储到sessionStorage里边，默认存储state里边的所有数据**
strategies: [
{
key:'token', storage: cookiesStorage, paths: ['token'] }
// storage 存储到哪里 sessionStorage/localStorage
// paths是一个数组,要存储缓存的变量,当然也可以写多个
// paths如果不写就默认存储state里边的所有数据，如果写了就存储指定的变量
]
},
//类似于computed 可以帮我们去修饰我们的值
getters: {
},
//可以操作异步 和 同步提交state
actions: {
setToken(token:string) {
this.token = token
}
}
})
erreur vue-router4.x api.now n'est pas une solution de fonction
Redémarrez/réinstallez les outils vue-develop
Publication en ligne, les images statiques ne sont pas chargées
Il n'y a pas une telle image publiée en ligne.
La raison est
la configuration officielle par défaut de vite. Si le fichier de ressources est empaqueté dans le dossier assets, le nom de l'image sera ajouté avec une valeur de hachage, mais il ne sera pas importé directement via :src ="imgSrc" lorsqu'il est empaqueté. Analyse, l'environnement de développement peut être importé normalement, mais le problème ne peut pas être affiché après l'empaquetage
. Résoudre :
// 获取assets静态资源
const getAssetsHomeFile = (root:string,url: string) => {
return new URL(`../assets/${
root}/${
url}`, import.meta.url).href
}
export default getAssetsHomeFile`
Configurer la page 404
{
path: '/:pathMatch(.*)',
name: 'MError',
component: MError,
meta: {
title: '404' }
}
Remplacer certains styles par défaut de la bibliothèque d'interface utilisateur
utiliser /profond/
Si vous souhaitez utiliser le mot clé await dans la configuration, vous devez l'utiliser dans la fonction de crochet de cycle de vie
résoudre:
onMounted( async () => {
const data = await getChartList({
})
// const a = data.data.year.reduce((pre,cur) => {
// return pre.concat(cur)
// },[])
// console.log(a)
initChart(pros.chartID, option)
})
L'élément de résolution a implicitement le type "any" car une expression de type "string" ne peut pas être utilisée avec le type d'index "Object". Une signature d'index avec un paramètre de type "chaîne" n'a pas pu être trouvée sur le type "Objet"
Solution :
définir une interface
interface DAMNU_ENABLE {
....
[key: string]: boolean, // 字段扩展声明
};
[key: string]: boolean, // 字段扩展声明 声明之后可以用方括号的方式去对象里边的值
ou méthode
export function isValidKey(
key: string | number | symbol,
object: object
): key is keyof typeof object {
return key in object
}
code passé par valeur
const assignmentFiel = (obj:object) => {
for (const key in obj) {
obj[key] = goods.FromRowitem[key]
}
return obj
}