Heim > Betrieb und Instandhaltung > Nginx > So lösen Sie das Problem, dass das Nginx-Bereitstellungs-Vue-Projekt die JS-CSS-Datei nicht finden kann

So lösen Sie das Problem, dass das Nginx-Bereitstellungs-Vue-Projekt die JS-CSS-Datei nicht finden kann

WBOY
Freigeben: 2023-05-15 19:40:12
nach vorne
2828 Leute haben es durchsucht

nginx部署vue项目找不到js css文件如何解决

Oft ist nach npm run build das relative Verzeichnis der vom Webpack automatisch in die Datei index.html eingefügten JS-Datei und CSS-Datei immer falsch und Danach wird Nginx die Datei nicht finden. npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件。

vue-cli@3

在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseurl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容:

...
module.exports = {
 baseurl: isprod
  ? '/basexxx/'
  : '/',
  ....
}
Nach dem Login kopieren

这里需要注意的是 dev 环境下不需要添加 baseurl 。

vue-cli@2

针对 非 vue-cli@3 生成的项目,你如果不关心 webpack 里面是如何实现的,你只需要找到 config/index.js , 修改其中的 build 中的 assetspublicpath 即可。

为了验证一下是否可行,你可以本地 build 一下,然后查看 dist/index.html 中引用的 js css 文件的路径是否携带上你刚刚设置的 assetspublicpath 即可。

而关心为啥这样设置就可以的同学们,继续看 build/webpack.base.conf.js 文件,


nginx部署vue项目找不到js css文件如何解决

非 production mode 下,是在config/index.js 中设置的,这里的 publicpath

vue-cli@3


In vue-cli@3 müssen Sie eine baseurl für alle Dateien hinzufügen, die Ihr Webpack in <code>index.html . Sie müssen eine neue vue.config.js im Stammverzeichnis des Projekts erstellen und den folgenden Inhalt hinzufügen: nginx部署vue项目找不到js css文件如何解决rrreee

Hier ist zu beachten, dass kein Hinzufügen erforderlich ist baseurl. 🎜🎜<strong>vue-cli@2</strong>🎜🎜Wenn es Ihnen bei Projekten, die von Nicht-vue-cli@3 generiert wurden, egal ist, wie das Webpack implementiert wird, müssen Sie nur <code>config/ finden index.js , ändern Sie einfach assetspublicpath in build. 🎜🎜Um zu überprüfen, ob dies möglich ist, können Sie es lokal erstellen und dann prüfen, ob der Pfad der in dist/index.html referenzierten JS-CSS-Datei den von Ihnen angegebenen assetspublicpathenthält einfach einstellen > Das war's. 🎜🎜Für Schüler, die sich Sorgen darüber machen, warum diese Einstellung ausreicht, schauen Sie sich weiterhin die Datei build/webpack.base.conf.js an, 🎜🎜🎜Das Nginx-Deployment-Vue-Projekt kann die JS-CSS-Datei nicht finden, wie man es löst🎜🎜Nicht in Produktion code>-Modus, es ist in <code>config/index.js eingestellt, der publicpath ist hier standardmäßig 🎜🎜🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass das Nginx-Bereitstellungs-Vue-Projekt die JS-CSS-Datei nicht finden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:yisu.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage