Question

我正在使用Laravel Mix来编译我的JS和CSS资产。我目前正在使用.version()来实现这一目标。

问题在于，这会生成类似于以下内容的文件：

/css/app.css?id=03def6a69840076e8f29

在本地提供服务时效果很好，但是如果我使用CDN通过原产拉取服务提供此内容，则查询字符串不会强制对文件进行新拉取。理想情况下，我希望以下内容代替：

/css/03def6a69840076e8f29/app.css

或者：

/css/03def6a69840076e8f29.css

这两个都是不同的文件，因此会强制拉CDN。

如何使用Laravel Mix做到这一点？

Answer 1

您可以尝试通过以下方式调用资产：

<link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">

Answer 2

我遇到了同样的问题，并提出了解决方案：

将以下行添加到public/.htaccess：

RewriteRule ^assets/[a-f0-9]+/(.*)$ /$1 [L]

在RewriteCond %{REQUEST_FILENAME} !-d之前

这会将/assets/ab7320d/css/whatever.css之类的网址视为/css/whatever.css

将以下代码放入resources/assets/js/rewriteMixManifest.js

let fs = require('fs')
let mixManifestPath = `${process.cwd()}/public/mix-manifest.json`
let mixFileContents = fs.readFileSync(mixManifestPath)
let oldMapping = JSON.parse(mixFileContents)
function updateMapping(path) {
    if(path.indexOf("?") < 1) {
        return path
    }
    let [filename, idPart] = path.split("?")
    let [_, id] = idPart.split("=")
    return `/assets/${id}${filename}`
}
let newContent = {}
for(let file in oldMapping) {
    newContent[file] = updateMapping(oldMapping[file])
}
console.log("Manifest rewritten.")
fs.writeFileSync(mixManifestPath, JSON.stringify(newContent, null, 2))

在package.json的{{1}}中添加以下行（就像“ dev”键一样）
```
scripts
```
在每次构建后（例如"rewrite-manifest": "node resources/assets/js/rewriteMixManifest.js",）也运行npm run production

因此npm run rewrite-manifest文件的作用是将每个资产文件（对于public/mix-manifest.json）映射到一些实际将用于HTML的字符串。我的脚本重写了该字符串，以使version而不是查询字符串，而是路径。 {{ mix('css/app.css') }}确保正确解释路径。

根据您的喜好，路径结构当然取决于您

对我来说，它解决了Google Cloud CDN的问题，希望对您有帮助

如何使用Laravel Mix将版本号添加到路径？

2 个答案: