So verwenden Sie statische Ressourcenverzeichnisse in Thinkjs3

Ich habe kürzlich thinkjs3 studiert und festgestellt, dass einige Stellen noch geklärt werden müssen. Der folgende Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Verwendung statischer Ressourcenverzeichnisse für Anfänger in Thinkjs3 vor Beispielcode. Freunde in Not können darauf verweisen.

Zugriff auf statische Ressourcen

Bei der Entwicklung eines Projekts müssen Sie im Allgemeinen in der Vorlage auf statische Ressourcen verweisen.

Wenn Sie den Befehl thinkjs zum Erstellen eines Projekts verwenden, wird automatisch das Verzeichnis www/static erstellt, das speziell zum Speichern statischer Ressourcen wie JS, CSS und Bilder verwendet wird.

0x0 Ich habe gehört, dass neue Projekte automatisch www/static haben!?

Es wird gesagt, dass die Standardprojektstruktur wie folgt ist:

|--- development.js //开发环境下的入口文件
|--- nginx.conf //nginx 配置文件
|--- package.json
|--- pm2.json //pm2 配置文件
|--- production.js //生产环境下的入口文件
|--- README.md
|--- src
| |--- bootstrap //启动自动执行目录 
| | |--- master.js //Master 进程下自动执行
| | |--- worker.js //Worker 进程下自动执行
| |--- config //配置文件目录
| | |--- adapter.js // adapter 配置文件 
| | |--- config.js // 默认配置文件 
| | |--- config.production.js //生产环境下的默认配置文件，和 config.js 合并 
| | |--- extend.js //extend 配置文件 
| | |--- middleware.js //middleware 配置文件 
| | |--- router.js //自定义路由配置文件
| |--- controller //控制器目录 
| | |--- base.js
| | |--- index.js
| |--- service //服务目录 
| | |--- **.js //用户自己定义的服务
| |--- logic //logic 目录
| | |--- index.js
| |--- model //模型目录
| | |--- index.js
|--- view //模板目录
| |--- index_index.html
|--- www
| |--- static //静态资源目录
| | |--- css
| | |--- img
| | |--- js

Es enthält das Verzeichnis www/static, aber das jetzt über thinkjs new erstellte Projekt verfügt nicht über dieses Verzeichnis, daher müssen Sie es selbst erstellen:

$ mkdir www && cd www
$ mkdir static

0x1 Fügen Sie Dateien hinzu

$ touch fuck.js && echo 'fuck 高数' > fuck.js

Hier erstelle ich eine ficken.js-Datei in meinem gewohnten Stil. Sie können auch andere Dateien nach Lust und Laune hinzufügen

Dann starten Sie das Projekt und sehen Sie sich die entsprechende Seite 127.0.0.1 :8360/fuck.js an

Wenn alles in Ordnung ist, wird etwas schief gehen!

0x2 Studierende, bitte geben Sie die URL ein, die dem Grundgesetz entspricht

Der richtige Weg sollte 127.0.0.1 sein: 8360/static/fuck.js

0x3 Was? Wenn Ihnen der Name static

nicht gefällt, können Sie ihn ändern, indem Sie die Ressourcenparameter in src/config/middleware.js ändern:

Vor der Änderung:

....
 {
 handle: 'resource',
 enable: isDev,
 options: {
 root: path.join(think.ROOT_PATH, 'www'),
 publicPath: /^\/(static|favicon\.ico)/ // <-- 此处将修改
 }
 },
....

Nach der Änderung:

....
 {
 handle: 'resource',
 enable: isDev,
 options: {
 root: path.join(think.ROOT_PATH, 'www'),
 publicPath: /^\/(public|favicon\.ico)/ // <-- 此处修改了
 }
 },
....

Es ist noch nicht fertig. Dementsprechend muss www/static in www/public geändert werden:

Vor der Änderung

|--- www
| |--- static //静态资源目录
| | |--- fuck.js

Nach der Änderung

|--- www
| |--- public //静态资源目录
| | |--- fuck.js

Sie sind fertig, besuchen Sie jetzt 127.0.0.1:8360/public/fuck.js und Sie werden Folgendes haben:

0xSegmentFuck Wahrnehmungsverständnis

• Die Verzeichnisstruktur des Thinkjs-Projekts entspricht gewissermaßen der URL der Website (kombiniert mit Kapitel 1).

• Der offiziellen Website kann nicht vertraut werden.

• Passen Sie src/config/middleware.js an, um die im Projekt verwendete Middleware anzupassen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie einen Webrechner in JS

So entfernen Sie das #-Zeichen aus der URL in Angular2 ( Detailliertes Tutorial)

Wie man JS verwendet, um die parabolische Flugbahnbewegung einer kleinen Kugel zu realisieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie statische Ressourcenverzeichnisse in Thinkjs3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!