Maison > Article > interface Web > Comment résoudre le problème selon lequel la modification du chemin de démarrage de vue ne prend pas effet

Comment résoudre le problème selon lequel la modification du chemin de démarrage de vue ne prend pas effet

PHPzoriginal: 2023-04-13 10:44:101208parcourir

Lorsque je développais récemment à l'aide du framework Vue, j'ai rencontré un problème, c'est-à-dire que la modification du chemin de démarrage du projet Vue n'a pas pris effet. Il s'agissait toujours du localhost:8080 accessible par défaut au lieu d'un chemin personnalisé. Après quelques recherches et expériences, j'ai trouvé une solution à ce problème et j'ai écrit cet article, dans l'espoir d'aider davantage de développeurs rencontrant le même problème.

Tout d’abord, jetons un coup d’œil au chemin de démarrage par défaut du projet Vue. Dans le projet Vue, nous utilisons le modèle de base généré par l'échafaudage vue-cli. La structure du projet généré est la suivante : vue-cli脚手架生成的基础模板，生成的项目结构如下：

projectName
│   package-lock.json
│   package.json
│   README.md
│
├───public
│       favicon.ico
│       index.html
│
└───src
        App.vue
        main.js

其中，public文件夹下的index.html是Vue项目的入口文件，我们可以在其中使用<%= BASE_URL %>变量来表示项目的根路径。Vue的默认模式是基于/路径进行启动，也就是localhost:8080/。当我尝试在vue.config.js文件中修改此默认路径后，却一直没有生效。

按照Vue官方文档上的介绍，在vue.config.js文件中应该添加如下代码：

module.exports = {
    publicPath: '/newpath/'
}

这样便可以将项目的启动路径修改为localhost:8080/newpath/。但是，经过实验，这种方法在我们的项目中并没有生效，原因是我们的项目使用了二级域名进行访问，例如http://myproject.example.com，而非http://example.com/myproject的路径访问方式。

因此，我们需要在public文件夹下的index.html中手动添加项目的根路径。找到index.html文件中的<head>标签，我们可以添加如下代码：

<base href="/newpath/">

这里的/newpath/就是我们自定义的启动路径。这样，无论我们如何修改vue.config.js文件中的publicPath，都能够正确地访问到项目。同时，我们也可以把路径改为/，这样我们就能够通过二级域名的方式来访问项目。

总之，无论是在何种方式下，修改Vue项目的启动路径都需要我们手动设置，而非仅仅在vue.config.jsrrreee

Parmi eux, sous le <code>publiccode> dossier index.html est le fichier d'entrée du projet Vue, où nous pouvons utiliser la variable <%= BASE_URL %> pour représenter le chemin racine du projet. Le mode par défaut de Vue consiste à démarrer en fonction du chemin /, qui est localhost:8080/. Lorsque j'ai essayé de modifier ce chemin par défaut dans le fichier vue.config.js, cela n'a jamais pris effet. 🎜🎜Selon l'introduction dans la documentation officielle de Vue, le code suivant doit être ajouté au fichier vue.config.js : 🎜rrreee🎜De cette façon, le chemin de démarrage du projet peut être modifié vers localhost:8080/ newpath/. Cependant, après des expérimentations, cette méthode n'a pas pris effet dans notre projet. La raison est que notre projet utilise à la place un nom de domaine de deuxième niveau pour l'accès, tel que http://myproject.example.com. de la méthode d'accès au chemin de http://example.com/myproject. 🎜🎜Par conséquent, nous devons ajouter manuellement le chemin racine du projet dans index.html sous le dossier public. Retrouvez la balise <head> dans le fichier index.html, on peut ajouter le code suivant : 🎜rrreee🎜Le /newpath/ ici c'est nous Chemin de démarrage personnalisé. De cette façon, peu importe la façon dont nous modifions le publicPath dans le fichier vue.config.js, nous pouvons accéder correctement au projet. Dans le même temps, nous pouvons également modifier le chemin vers /, afin de pouvoir accéder au projet via le nom de domaine de deuxième niveau. 🎜🎜En bref, peu importe la façon dont nous modifions le chemin de démarrage du projet Vue, nous devons le définir manuellement au lieu de simplement définir un paramètre dans le fichier vue.config.js. Dans les projets réels, la configuration du chemin de démarrage correct sera une étape très importante. 🎜

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!

html public JS http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment changer la police en HTMLArticle suivant：Comment changer la police en HTML

Articles Liés

Voir plus