英文:
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:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /folder1/
RewriteRule ^(.*)$ public/index.php/$1 [L]
</IfModule>
I ran NPM run production and Im working with mix, my package.json is configured like this:
{
"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"
}
}
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:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
答案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
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"}
to this:
{
"/js/app.js": "./js/app.js",
"/css/app.css": "./css/app.css"}
and my htaccess generated with looking like this:
<!-- 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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论