設(shè)置靜態(tài)資源前綴
文檔
打包命令中指定環(huán)境REACT_APP_ENV
"build-test": "REACT_APP_ENV=test ...",
"build-uat": "REACT_APP_ENV=uat ...",
"build-prod": "REACT_APP_ENV=prod ...",
next.config.js文件
let assetPrefix = '';
if(process.env.REACT_APP_ENV === 'test') {
assetPrefix = '//cdn.test.wangyu.com';
}
if(process.env.REACT_APP_ENV === 'uat') {
assetPrefix = '//cdn.uat.wangyu.com';
}
if(process.env.REACT_APP_ENV === 'prod') {
assetPrefix = '//cdn.wangyu.com';
}
module.exports = {
assetPrefix, // 靜態(tài)資源路徑
}
圖片文件前綴
Next.js will automatically use your prefix in the scripts it loads, but this has no effect whatsoever on the public folder; if you want to serve those assets over a CDN, you'll have to introduce the prefix yourself
一種實現(xiàn)方式
在next.config.js中添加env配置
module.exports = {
env: {
staticPath: '//mycdn.com/...',
},
}
在需要的地方
<footer>
<a
href=""
target="_blank"
rel="noopener noreferrer"
>
Powered by <img src={`${process.env.staticPath}/zeit.svg`} alt="ZEIT Logo" />
</a>
</footer>
