Laravel 版本缓存与 Laravel Mix 不工作

Posted

技术标签:

【中文标题】Laravel 版本缓存与 Laravel Mix 不工作【英文标题】:Laravel Version Cache with Laravel Mix Not Working 【发布时间】:2018-08-03 20:00:11 【问题描述】:

我正在尝试使用 laravel mix 但在浏览器中返回错误 404

Laravel 5.6.4

我的 .env APP_URL APP_URL=http://localhost/base-site-template/public

我的 mix-manifest.json

"/js/lib/echarts.js": "/js/lib/echarts.js?id=a24928e50f4d775d9e3e",
"/js/lib/moment.js": "/js/lib/moment.js?id=a3cde5d62118f1b1ac08",
"/js/lib/axios.js": "/js/lib/axios.js?id=1129cee8012a0ec7cb58",
"/css/lib/vuetify.css": "/css/lib/vuetify.css?id=c7533b5bc8f96cca4e90",
"/css/index.css": "/css/index.css?id=d41d8cd98f00b204e980",
"/css/template.css": "/css/template.css?id=c7533b5bc8f96cca4e90",
"/js/template.js": "/js/template.js?id=3213a53c38fb71543141",
"/js/lib/vue.js": "/js/lib/vue.js?id=e41f4d0b6a918ca9213d",
"/js/lib/lodash.js": "/js/lib/lodash.js?id=98dc43a5e921b41ef214",
"/js/lib/vee-validate.js": "/js/lib/vee-validate.js?id=bfc8600a0fc91c459f0e",
"/js/lib/vuetify.js": "/js/lib/vuetify.js?id=f0c3ad550b36770ee4c9",
"/js/index.js": "/js/index.js?id=5a79665b4d1331d942d7"

我正在尝试使用 mix('js/template.js') 获取 css 和 js 文件

有人可以帮我吗?

【问题讨论】:

请不要使用图片,发布实际代码。 【参考方案1】:

您的资源正在尝试从根目录加载:

您访问的是/base-site-template/public 而不是/ 的网站。所以你必须访问/base-site-template/public/js/index.js而不是/js/index.js的文件。

如果您的 APP_URL 设置正确,您可以使用asset() 助手为您的 APP_URL 添加前缀。

 asset(mix('js/template.js')) 

【讨论】:

【参考方案2】:

资产在编译时放入public/目录,例如:

public/js/lib/echarts.js

您的浏览器会将以/ 开头的相对请求视为相对于http://localhost/ 的基本路径。例如,当您加载页面http://localhost/base-site-template/public 并引用/js/lib/echarts.js 时,浏览器将发出此请求:

http://localhost/js/lib/echarts.js

但是,这不是您的资产所在的位置,您的资产所在的位置:

http://localhost/base-site-template/public/js/lib/echarts.js

因此,您需要:

    使用绝对 URL 而不是相对路径来引用资产 告诉客户端浏览器使用不同的基本路径 将您的应用程序移动到基本路径

您可以使用asset helper 引用具有绝对路径的资产:

asset(mix('public/js/lib/echarts.js'));

您可以使用文档中的base element head 告诉客户端浏览器使用不同的基本路径:

<base href="http://localhost/base-site-template/public/">

【讨论】:

以上是关于Laravel 版本缓存与 Laravel Mix 不工作的主要内容,如果未能解决你的问题,请参考以下文章

Laravel Mix + BrowserSync无限加载开箱即用

关于Laravel中使用Laravel-mix打包资源文件的一个坑

laravel-mix 文档翻译

laravel-mix 热重载404的问题

Vue - 由于 webpack 版本(vue-cli-service、laravel-mix、webpack)导致 npm run serve 命令崩溃

javascript 使用Purgecss与Tailwind和Laravel Mix