Comment résoudre le problème selon lequel la modification du chemin de démarrage de vue ne prend pas effet-Questions et réponses frontales-php.cn

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

PHPz

Libérer： 2023-04-13 10:45:51

original

1265 Les gens l'ont consulté

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

Copier après la connexion

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

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

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

Copier après la connexion

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

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

<base href="/newpath/">

Copier après la connexion

这里的/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!