


Quelle est la méthode de configuration des paramètres devServer sur tous les domaines dans Vue3 ?
devServer
est un objet d'options utilisé pour configurer le serveur de développement. Il peut être utilisé pour configurer diverses options du serveur, telles que le proxy, le numéro de port, HTTPS, etc. devServer
是一个用于配置开发服务器的选项对象。它可以用来配置服务器的各种选项,例如代理,端口号,HTTPS 等。
以下是一些常用的 devServer
参数和设置:
port
:指定开发服务器的端口号,默认为8080
。host
:指定开发服务器的主机名,默认为localhost
。https
:开启 HTTPS,可以传入一个Object
类型的参数,用于配置 HTTPS 选项。open
:自动打开浏览器,默认为false
。可以传入一个String
类型的参数,用于指定浏览器的名称。proxy
:用于配置代理。可以传入一个Object
类型的参数,用于配置代理选项。hot
:启用热重载,默认为true
。compress
:启用 gzip 压缩。historyApiFallback
:启用 HTML5 历史模式路由。当浏览器访问的路径不存在时,将返回index.html
文件,而不是 404 页面。publicPath
:指定资源的公共路径,可以是一个相对路径或绝对路径。quiet
:禁用所有输出信息。clientLogLevel
:指定在浏览器控制台中显示的日志级别,默认为info
。overlay
:在浏览器中显示编译错误。watchOptions
:用于配置监视文件的选项。contentBase
:指定静态文件的目录,默认为项目根目录。before
和after
:在服务器启动之前或之后执行自定义代码。
下面是一个 devServer
的配置示例:
// vue.config.js module.exports = { devServer: { port: 8080, host: 'localhost', https: false, open: true, proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } }, hot: true, compress: true, historyApiFallback: true, publicPath: '/', quiet: true, clientLogLevel: 'warning', overlay: true, watchOptions: { poll: false }, contentBase: './public', before: function(app) { // 在服务器启动之前执行自定义代码 }, after: function(app) { // 在服务器启动之后执行自定义代码 } } };
在这个示例中,我们做了以下配置:
将开发服务器的端口号设置为
8080
。将开发服务器的主机名设置为
localhost
。禁用 HTTPS。
自动打开浏览器。
配置代理,将所有以
/api
开头的请求代理到http://localhost:3000
。启用热重载。
启用 gzip 压缩。
启用 HTML5 历史模式路由。
指定资源的公共路径为根目录。
禁用所有输出信息。
将日志级别设置为
warning
。在浏览器中显示编译错误。
监视文件的选项设置为默认值。
指定静态文件的目录为
./public
。在服务器启动之前和之后执行自定义代码。
您可以根据自己的需求来配置 devServer
devServer
couramment utilisés : #🎜🎜#- #🎜🎜#port : Spécifiez le numéro de port du serveur de développement, la valeur par défaut est
8080
. #🎜🎜# - #🎜🎜#
host
: Spécifiez le nom d'hôte du serveur de développement, la valeur par défaut estlocalhost
. #🎜🎜# - #🎜🎜#
https
: Pour activer HTTPS, vous pouvez transmettre un paramètre de typeObject
pour configurer les options HTTPS. #🎜🎜# - #🎜🎜#
open
: ouvre automatiquement le navigateur, la valeur par défaut estfalse
. Vous pouvez passer un paramètre de typeString
pour spécifier le nom du navigateur. #🎜🎜# - #🎜🎜#
proxy
: utilisé pour configurer le proxy. Vous pouvez transmettre un paramètre de typeObject
pour configurer les options de proxy. #🎜🎜# - #🎜🎜#
hot
: Activer le rechargement à chaud, la valeur par défaut esttrue
. #🎜🎜# - #🎜🎜#
compress
: Activer la compression gzip. #🎜🎜# - #🎜🎜#
historyApiFallback
: Activer le routage en mode historique HTML5. Lorsque le chemin accédé par le navigateur n'existe pas, le fichierindex.html
sera renvoyé à la place de la page 404. #🎜🎜# - #🎜🎜#
publicPath
: Spécifie le chemin public de la ressource, qui peut être un chemin relatif ou un chemin absolu. #🎜🎜# - #🎜🎜#
quiet
: Désactivez toutes les informations de sortie. #🎜🎜# - #🎜🎜#
clientLogLevel
: Spécifie le niveau de journalisation affiché dans la console du navigateur, la valeur par défaut estinfo
. #🎜🎜# - #🎜🎜#
overlay
: Afficher les erreurs de compilation dans le navigateur. #🎜🎜# - #🎜🎜#
watchOptions
: Options de configuration des fichiers de surveillance. #🎜🎜# - #🎜🎜#
contentBase
: Spécifiez le répertoire des fichiers statiques, qui est par défaut le répertoire racine du projet. #🎜🎜# - #🎜🎜#
avant
etaprès
: exécutez du code personnalisé avant ou après le démarrage du serveur. #🎜🎜#
devServer
: #🎜🎜#rrreee#🎜🎜#Dans cet exemple, nous avons effectué la configuration suivante :#🎜🎜#- #🎜🎜#Définissez le numéro de port du serveur de développement sur
8080
. #🎜🎜# - #🎜🎜#Définissez le nom d'hôte du serveur de développement sur
localhost
. #🎜🎜# - #🎜🎜# Désactivez HTTPS. #🎜🎜#
- #🎜🎜#Ouvrez automatiquement le navigateur. #🎜🎜#
- #🎜🎜#Configurez le proxy pour qu'il proxy toutes les requêtes commençant par
/api
vershttp://localhost:3000
. #🎜🎜# - #🎜🎜# Activer le rechargement à chaud. #🎜🎜#
- #🎜🎜# Activer la compression gzip. #🎜🎜#
- #🎜🎜# Activer le routage en mode historique HTML5. #🎜🎜#
- #🎜🎜#Le chemin public de la ressource spécifiée est le répertoire racine. #🎜🎜#
- #🎜🎜#Désactivez toutes les informations de sortie. #🎜🎜#
- #🎜🎜#Définissez le niveau de journalisation sur
avertissement
. #🎜🎜# - #🎜🎜#Afficher les erreurs de compilation dans le navigateur. #🎜🎜#
- #🎜🎜# Les options de surveillance des fichiers sont définies sur les valeurs par défaut. #🎜🎜#
- #🎜🎜#Spécifiez le répertoire des fichiers statiques comme
./public
. #🎜🎜# - #🎜🎜#Exécutez du code personnalisé avant et après le démarrage du serveur. #🎜🎜#
devServer
selon vos propres besoins. Cet exemple n'est qu'un point de départ et peut être modifié et étendu en fonction de vos besoins. #🎜🎜#Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

vue3+vite:src utilise require pour importer dynamiquement des images et des rapports d'erreurs et des solutions. vue3+vite importe dynamiquement plusieurs images. Si vue3 est développé à l'aide de TypeScript, il y aura un message d'erreur indiquant que requireisnotdefined ne peut pas être utilisé comme imgUrl. :require(' .../assets/test.png') est importé car TypeScript ne prend pas en charge require, donc l'importation est utilisée. Voici comment le résoudre : utilisez waitimport.

tinymce est un plug-in d'éditeur de texte riche entièrement fonctionnel, mais l'introduction de tinymce dans vue n'est pas aussi fluide que les autres plug-ins de texte riche de Vue. tinymce lui-même ne convient pas à Vue, et @tinymce/tinymce-vue doit être introduit, et Il s'agit d'un plug-in de texte riche étranger et n'a pas passé la version chinoise. Vous devez télécharger le package de traduction depuis son site officiel (vous devrez peut-être contourner le pare-feu). 1. Installez les dépendances associées npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. Téléchargez le package chinois 3. Introduisez le skin et le package chinois Créez un nouveau dossier tinymce dans le dossier public du projet et téléchargez le.

Pour implémenter le front-end du blog avec Vue, vous devez implémenter l'analyse markdown. S'il y a du code, vous devez implémenter la mise en évidence du code. Il existe de nombreuses bibliothèques d'analyse de démarques pour Vue, telles que markdown-it, vue-markdown-loader, Markdown, vue-markdown, etc. Ces bibliothèques sont toutes très similaires. Marked est utilisé ici et highlight.js est utilisé comme bibliothèque de mise en évidence du code. Les étapes d'implémentation spécifiques sont les suivantes : 1. Installez les bibliothèques dépendantes. Ouvrez la fenêtre de commande sous le projet vue et entrez la commande suivante npminstallmarked-save//marked pour convertir le markdown en htmlnpmins.

Pour réaliser un rafraîchissement partiel de la page, il suffit d'implémenter le re-rendu du composant local (dom). Dans Vue, le moyen le plus simple d'obtenir cet effet est d'utiliser la directive v-if. Dans Vue2, en plus d'utiliser l'instruction v-if pour restituer le dom local, nous pouvons également créer un nouveau composant vierge. Lorsque nous devons actualiser la page locale, accéder à cette page de composant vierge, puis y revenir. la garde beforeRouteEnter dans la page d’origine vierge. Comme le montre la figure ci-dessous, comment cliquer sur le bouton d'actualisation dans Vue3.X pour recharger le DOM dans la zone rouge et afficher l'état de chargement correspondant. Puisque la garde dans le composant dans la syntaxe scriptsetup dans Vue3.X n'a que o

Une fois le projet vue3 empaqueté et publié sur le serveur, la page d'accès affiche un 1 vide. Le publicPath dans le fichier vue.config.js est traité comme suit : const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

Préface Que ce soit vue ou réagir, lorsque nous rencontrons plusieurs codes répétés, nous réfléchirons à comment réutiliser ces codes, au lieu de remplir un fichier avec un tas de codes redondants. En fait, Vue et React peuvent être réutilisés en extrayant des composants, mais si vous rencontrez quelques petits fragments de code et que vous ne souhaitez pas extraire un autre fichier, en comparaison, React peut être utilisé dans le même Déclarez le widget correspondant dans le fichier. , ou implémentez-le via la fonction de rendu, telle que : constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

L'effet final est d'installer le composant VueCropper filaddvue-cropper@next. La valeur d'installation ci-dessus est pour Vue3 ou si vous souhaitez utiliser d'autres méthodes de référence, veuillez visiter son adresse officielle npm : tutoriel officiel. Il est également très simple de le référencer et de l'utiliser dans un composant. Il suffit d'introduire le composant correspondant et son fichier de style. Je ne le référence pas globalement ici, mais j'introduis uniquement import{userInfoByRequest}from'../js/api. ' dans mon fichier de composant import{VueCropper}from'vue-cropper&.

Utilisation de Vue pour créer des éléments personnalisés WebComponents est un nom collectif pour un ensemble d'API Web natives qui permettent aux développeurs de créer des éléments personnalisés réutilisables (customelements). Le principal avantage des éléments personnalisés est qu’ils peuvent être utilisés avec n’importe quel framework, même sans. Ils sont idéaux lorsque vous ciblez des utilisateurs finaux susceptibles d'utiliser une pile technologique frontale différente, ou lorsque vous souhaitez dissocier l'application finale des détails d'implémentation des composants qu'elle utilise. Vue et WebComponents sont des technologies complémentaires et Vue offre un excellent support pour l'utilisation et la création d'éléments personnalisés. Vous pouvez intégrer des éléments personnalisés dans des applications Vue existantes ou utiliser Vue pour créer
