设置静态资源前缀
文档
打包命令中指定环境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, // 静态资源路径
}
图片文件前缀
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
一种实现方式
在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>
