Laravel x Hostinger 部署后，SCSS 未加载。

huangapple
go评论89阅读模式
英文:

Laravel x Hostinger SCSS not loading when deployed

问题

我一直在使用Laravel开发一个Web应用程序。最近，我想要在生产服务器上部署一个预览版本，所以我将文件上传到了Hostinger，但是SCSS样式没有加载，控制器的路由也没有正常工作。我在这个主题上没有找到太多信息，因为我不知道应该搜索什么，我认为这可能与我的htaccess文件有关，但我不确定这是否有意义：

  1. <IfModule mod_rewrite.c>
  2. RewriteEngine On
  3. RewriteBase /folder1/
  4. RewriteRule ^(.*)$ public/index.php/$1 [L]
  5. </IfModule>

我运行了npm run production，并且使用Mix，我的package.json 配置如下：

  1. {
  2.     "private": true,
  3.     "type": "commonjs",
  4.     "scripts": {
  5.         "dev": "npm run development",
  6.         "development": "mix",
  7.         "watch": "mix watch",
  8.         "hot": "mix hot",
  9.         "prod": "npm run production",
  10.         "production": "mix --production"
  11.     },
  12.     "devDependencies": {
  13.         "axios": "^1.1.2",
  14.         "laravel-mix": "^6.0.49",
  15.         "laravel-vite-plugin": "^0.7.5",
  16.         "resolve-url-loader": "^5.0.0",
  17.         "sass": "^1.63.6",
  18.         "sass-loader": "^12.1.0",
  19.         "vite": "^4.0.0"
  20.     },
  21.     "dependencies": {
  22.         "bootstrap": "^5.3.0",
  23.         "jquery": "^3.7.0",
  24.         "toastr": "^2.1.4",
  25.         "webpack": "^5.88.1"
  26.     }
  27. }

我的Web应用在本地主机上完美运行，但在生产环境中，我的SCSS样式没有加载，控制器也无法正常工作。我在布局的头部标签中使用以下方式调用SCSS的HTML标签：

  1. <link rel="stylesheet" href="{{ mix('css/app.css') }}">
英文:

I've been developing a web app in Laravel. I've recently wanted to deploy a preview in the production server so I uploaded the files to the hostinger but the scss did not load nor the routing to my controllers. I didn't really find much info on the topic since I don't really know what to look for, I believe it may be my htaccess file but idk id that even makes sense:

  1.  &lt;IfModule mod_rewrite.c&gt;
  2.  RewriteEngine On
  3. RewriteBase /folder1/
  4.     RewriteRule ^(.*)$ public/index.php/$1 [L]
  5. &lt;/IfModule&gt;

I ran NPM run production and Im working with mix, my package.json is configured like this:

  1. {
  2.     &quot;private&quot;: true,
  3.     &quot;type&quot;: &quot;commonjs&quot;,
  4.     &quot;scripts&quot;: {
  5.         &quot;dev&quot;: &quot;npm run development&quot;,
  6.         &quot;development&quot;: &quot;mix&quot;,
  7.         &quot;watch&quot;: &quot;mix watch&quot;,
  8.         &quot;hot&quot;: &quot;mix hot&quot;,
  9.         &quot;prod&quot;: &quot;npm run production&quot;,
  10.         &quot;production&quot;: &quot;mix --production&quot;
  11.     },
  12.     &quot;devDependencies&quot;: {
  13.         &quot;axios&quot;: &quot;^1.1.2&quot;,
  14.         &quot;laravel-mix&quot;: &quot;^6.0.49&quot;,
  15.         &quot;laravel-vite-plugin&quot;: &quot;^0.7.5&quot;,
  16.         &quot;resolve-url-loader&quot;: &quot;^5.0.0&quot;,
  17.         &quot;sass&quot;: &quot;^1.63.6&quot;,
  18.         &quot;sass-loader&quot;: &quot;^12.1.0&quot;,
  19.         &quot;vite&quot;: &quot;^4.0.0&quot;
  20.     },
  21.     &quot;dependencies&quot;: {
  22.         &quot;bootstrap&quot;: &quot;^5.3.0&quot;,
  23.         &quot;jquery&quot;: &quot;^3.7.0&quot;,
  24.         &quot;toastr&quot;: &quot;^2.1.4&quot;,
  25.         &quot;webpack&quot;: &quot;^5.88.1&quot;
  26.     }
  27. }

My webApp works perfectly on localhost, but then again on prod my scss styles dont load nor does it fin my controllers. Im calling the html tag for scss in a layout head tag like this:

  1.   &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ mix(&#39;css/app.css&#39;) }}&quot;&gt;

答案1

得分: 0

这个问题是通过编辑我的 public/mix-manifest.json 文件，将路径改为相对路径来解决的：

从这个：

  1. {
  2.     "/js/app.js": "/js/app.js",
  3.     "/css/app.css": "/css/app.css"
  4. }

改为这个：

  1. {
  2.     "/js/app.js": "./js/app.js",
  3.     "/css/app.css": "./css/app.css"
  4. }

我的 htaccess 文件看起来是这样生成的：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-html -->
  4. <IfModule mod_rewrite.c>
  5.     <IfModule mod_negotiation.c>
  6.         Options -MultiViews -Indexes
  7.     </IfModule>
  9.     RewriteEngine On
  11.     # Handle Authorization Header
  12.     RewriteCond %{HTTP:Authorization} .
  13.     RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
  15.     # Redirect Trailing Slashes If Not A Folder...
  16.     RewriteCond %{REQUEST_FILENAME} !-d
  17.     RewriteCond %{REQUEST_URI} (.+)/$
  18.     RewriteRule ^ %1 [L,R=301]
  20.     # Send Requests To Front Controller...
  21.     RewriteCond %{REQUEST_FILENAME} !-d
  22.     RewriteCond %{REQUEST_FILENAME} !-f
  23.     RewriteRule ^ index.php [L]
  24. </IfModule>
  25. <!-- end snippet -->
英文:

It was fixed by editing my public/mix-manifest.json changing the paths to a relative route:
from this

  1. {
  2. &quot;/js/app.js&quot;: &quot;/js/app.js&quot;,
  3. &quot;/css/app.css&quot;: &quot;/css/app.css&quot;}

to this:

  1. {
  2. &quot;/js/app.js&quot;: &quot;./js/app.js&quot;,
  3. &quot;/css/app.css&quot;: &quot;./css/app.css&quot;}

and my htaccess generated with looking like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;IfModule mod_rewrite.c&gt;
  2.     &lt;IfModule mod_negotiation.c&gt;
  3.         Options -MultiViews -Indexes
  4.     &lt;/IfModule&gt;
  6.     RewriteEngine On
  8.     # Handle Authorization Header
  9.     RewriteCond %{HTTP:Authorization} .
  10.     RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
  12.     # Redirect Trailing Slashes If Not A Folder...
  13.     RewriteCond %{REQUEST_FILENAME} !-d
  14.     RewriteCond %{REQUEST_URI} (.+)/$
  15.     RewriteRule ^ %1 [L,R=301]
  17.     # Send Requests To Front Controller...
  18.     RewriteCond %{REQUEST_FILENAME} !-d
  19.     RewriteCond %{REQUEST_FILENAME} !-f
  20.     RewriteRule ^ index.php [L]
  21. &lt;/IfModule&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月17日 23:02:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/76705775.html
  • hosting
  • laravel
  • laravel-mix
  • php
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定