So lösen Sie das Problem, dass das Ändern des Startpfads von Vue nicht wirksam wird-Front-End-Fragen und Antworten-php.cn

So lösen Sie das Problem, dass das Ändern des Startpfads von Vue nicht wirksam wird

PHPz

Freigeben： 2023-04-13 10:45:51

Original

1265 Leute haben es durchsucht

Als ich kürzlich mit dem Vue-Framework entwickelte, stieß ich auf ein Problem, das heißt, die Änderung des Startpfads des Vue-Projekts wurde nicht wirksam. Es wurde immer noch auf den Standardpfad localhost:8080 zugegriffen, und nicht auf einen benutzerdefinierten Pfad. Nach einigen Recherchen und Experimenten habe ich eine Lösung für dieses Problem gefunden und diesen Artikel geschrieben, in der Hoffnung, mehr Entwicklern zu helfen, die auf das gleiche Problem stoßen.

Werfen wir zunächst einen Blick auf den Standard-Startpfad des Vue-Projekts. Im Vue-Projekt verwenden wir die vom vue-cli-Gerüst generierte Grundvorlage. Die generierte Projektstruktur lautet wie folgt: vue-cli脚手架生成的基础模板，生成的项目结构如下：

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

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

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

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

<base href="/newpath/">

Nach dem Login kopieren

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

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

Daunter befindet sich unter dem <code>publiccode> Ordner index.html ist die Eintragsdatei des Vue-Projekts, in der wir die Variable <%= BASE_URL %> verwenden können, um den Stammpfad des Projekts darzustellen. Der Standardmodus von Vue besteht darin, basierend auf dem Pfad / zu starten, der localhost:8080/ ist. Als ich versuchte, diesen Standardpfad in der Datei vue.config.js zu ändern, wurde er nie wirksam. 🎜🎜Laut der Einleitung in der offiziellen Vue-Dokumentation sollte der folgende Code zur Datei vue.config.js hinzugefügt werden: 🎜rrreee🎜Auf diese Weise kann der Startpfad des Projekts geändert werden zu localhost:8080/ newpath/. Nach Experimenten hat diese Methode in unserem Projekt jedoch keine Wirkung gezeigt. Der Grund dafür ist, dass unser Projekt stattdessen einen Domänennamen der zweiten Ebene für den Zugriff verwendet, z. B. http://myproject.example.com der Pfadzugriffsmethode von http://example.com/myproject. 🎜🎜Daher müssen wir den Stammpfad des Projekts manuell in index.html im Ordner public hinzufügen. Suchen Sie das <head>-Tag in der Datei index.html. Wir können den folgenden Code hinzufügen: 🎜rrreee🎜Der /newpath/ hier ist unser maßgeschneiderter Startpfad. Auf diese Weise können wir unabhängig davon, wie wir den publicPath in der Datei vue.config.js ändern, korrekt auf das Projekt zugreifen. Gleichzeitig können wir auch den Pfad in / ändern, sodass wir über den Domänennamen der zweiten Ebene auf das Projekt zugreifen können. 🎜🎜Kurz gesagt, egal wie wir den Startpfad des Vue-Projekts ändern, wir müssen ihn manuell festlegen, anstatt nur eine Einstellung in der Datei vue.config.js vorzunehmen. In tatsächlichen Projekten ist die Konfiguration des richtigen Startpfads ein sehr wichtiger Schritt. 🎜

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass das Ändern des Startpfads von Vue nicht wirksam wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!