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

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

Laravel x Hostinger SCSS not loading when deployed

问题

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

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

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

{
    "private": true,
    "type": "commonjs",
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "hot": "mix hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-mix": "^6.0.49",
        "laravel-vite-plugin": "^0.7.5",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.63.6",
        "sass-loader": "^12.1.0",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "bootstrap": "^5.3.0",
        "jquery": "^3.7.0",
        "toastr": "^2.1.4",
        "webpack": "^5.88.1"
    }
}

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

<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:

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

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

{
    &quot;private&quot;: true,
    &quot;type&quot;: &quot;commonjs&quot;,
    &quot;scripts&quot;: {
        &quot;dev&quot;: &quot;npm run development&quot;,
        &quot;development&quot;: &quot;mix&quot;,
        &quot;watch&quot;: &quot;mix watch&quot;,
        &quot;hot&quot;: &quot;mix hot&quot;,
        &quot;prod&quot;: &quot;npm run production&quot;,
        &quot;production&quot;: &quot;mix --production&quot;
    },
    &quot;devDependencies&quot;: {
        &quot;axios&quot;: &quot;^1.1.2&quot;,
        &quot;laravel-mix&quot;: &quot;^6.0.49&quot;,
        &quot;laravel-vite-plugin&quot;: &quot;^0.7.5&quot;,
        &quot;resolve-url-loader&quot;: &quot;^5.0.0&quot;,
        &quot;sass&quot;: &quot;^1.63.6&quot;,
        &quot;sass-loader&quot;: &quot;^12.1.0&quot;,
        &quot;vite&quot;: &quot;^4.0.0&quot;
    },
    &quot;dependencies&quot;: {
        &quot;bootstrap&quot;: &quot;^5.3.0&quot;,
        &quot;jquery&quot;: &quot;^3.7.0&quot;,
        &quot;toastr&quot;: &quot;^2.1.4&quot;,
        &quot;webpack&quot;: &quot;^5.88.1&quot;
    }
}

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:

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

答案1

得分: 0

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

从这个:

{
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css"
}

改为这个:

{
    "/js/app.js": "./js/app.js",
    "/css/app.css": "./css/app.css"
}

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

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

<!-- language: lang-html -->
<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>
<!-- end snippet -->
英文:

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

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

to this:

{
&quot;/js/app.js&quot;: &quot;./js/app.js&quot;,
&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 -->

&lt;IfModule mod_rewrite.c&gt;
    &lt;IfModule mod_negotiation.c&gt;
        Options -MultiViews -Indexes
    &lt;/IfModule&gt;

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
&lt;/IfModule&gt;

<!-- end snippet -->

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

发表评论

匿名网友

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

确定