如何解决Next.js自定义配置在索引上产生404-next-images,next-css,webpack,lquip-loader
我正在尝试使next-images和next-css一起(通过next-css)编辑我的webpack配置,以允许图像加载器解析图像。
尝试此操作后,我发现了next-compose-plugins,旨在帮助加载下一个插件。
在阅读了他们的文档之后,我在某种程度上拼凑了next.config.js:
const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css')
const withImages = require('next-images');
// next.js configuration
const nextConfig = {
useFileSystemPublicRoutes: false,distDir: 'build',};
module.exports = withPlugins([
[withCSS,{
webpack: (config,options) => {
const { isServer,dev } = options
config.module.rules.push({
test: /\.(jpe?g|png|svg|gif|ico|webp)$/,use: [
{
loader: 'lqip-loader',options: {
fallback: 'file-loader',base64: !dev,publicPath: '/_next/static/images/',outputPath: `${isServer ? '../' : ''}static/images/`,name: '[name]-[hash].[ext]',palette: true
}
}
]
})
return config
},cssLoaderOptions: {
url: false
}
}
],withImages
],nextConfig)
我不确定这是否正确,因为这样做并重新启动本地开发服务器,我现在在http:// localhost:3000 /上进行404-ing操作
任何帮助我都感激不尽,因为我遇到了麻烦,因为控制台日志只是一个404,而且我无法调试。
预先感谢
詹姆斯
解决方法
const nextConfig = {
useFileSystemPublicRoutes: true,distDir: 'build',};
将此设置为true,解决了我的404
我交叉引用了这个,同时还包含了一个不错的next.js配置,并且默认情况下它是true,所以不知道为什么next-compose-plugins文档会建议这个,但是是的。希望这能帮助到进一步的人。
ofc喊@Ramakay以获得正确答案
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。