笔者遇到的问题是:vue项目部署成功,也能访问,唯独就是界面加载不出来,通过logs日志:tail error.log命令,打印出:说一部分js、css文案not found****,笔者cd到项目目录下去查看,就是缺少一些文件,缺少文件的原因只能是vue项目打包时出现了问题,重新对项目npm run build,果然在打包的时,报了两个警告,一样。如下
警告:entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
解释:入口点大小限制:以下入口点合并资产大小超过推荐限制(244 KiB)。这可能会影响web性能。
真是让人好找一番!!!唉!!!
下面给大家说下,我解决的方法:

在根目录下,创建一个vue.config.js文件

//问题还是未解决,是不报警告啦,但问题只是被影藏掉而已,没有解决掉。建议:使用下面的方法
module.exports = {
	configureWebpack : {
	//关闭提示
		performance : {
			hints : false,
		}
	}
}

或者

//通过改变入口和生成文件的大小来解决,该方法:可行。
module.exports = {
    configureWebpack : {
        //关闭webpack的性能提示
        // performance : {
        //     hints : false
        // },
        performance: {
            hints: 'warning',
            // 入口起点的最大体积
            maxEntrypointSize: 50000000,
            // 生成文件的最大体积
            maxAssetSize: 30000000,
            // 只给出 js 文件的性能提示
            assetFilter: function(assetFilename) {
              return assetFilename.endsWith('.js') || assetFilename.endsWith('.css');
            }
        },
    },
}

这里已解决掉由于限制大小的问题引起的 警告、错误 提示。

通过查看打包的dist文件中找到了之前丢失的文件,说明我们已经将文件打包成功!!再次浏览器访问,能访问到就是没有界面,笔者怀疑是静态文件加载路径的问题,针对这个问题,后期笔者做解答。

Logo

前往低代码交流专区

更多推荐