Vue CLI 3.3+版本 build后打开index.html 文件空白的解决方案

最新推荐文章于 2024-07-06 17:38:26 发布

置顶

戴珍珠耳环的猫

最新推荐文章于 2024-07-06 17:38:26 发布

阅读量2.1k

点赞数 5

分类专栏： node.js 文章标签： vue html javascript vue.js

本文链接：https://blog.youkuaiyun.com/smildwind/article/details/106129886

版权

Vue CLI 3.3+版本构建后打开的index.html出现空白，原因是js文件丢失。解决方案是在package-lock.json同级目录创建vue.config.js，设置publicPath为'././'，这将使引用变为相对路径，从而解决资源加载问题。对于Vue 3.3+的封装过度，可能导致某些配置不便。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue CLI 3.3+版本 build后打开index.html 文件空白，在控制台里查看原因，发现是js文件丢失引起的，下面上解决方案

在package-lock.json的同级目录下，新建一个文件命名为 vue.config.js

在官网的解释是，设置 publicPath:'./'即可使用相对路径，但是实际测试发现，设置为 ./ 无效，但是发现设置成 ././ 两个./的时候，再次编译，发现index.html里的引用变成相对路径了，可能Vue cli3.3自己吞掉了头两个字符吧 ╮(╯▽╰)╭

输入一下内容：

const webpack = require('webpack')
module.exports = {
    //部署应用包时的基本 URL
     publicPath: process.env.NODE_ENV === "production" ? "././" : "/",
    //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
    outputDir: 'dist',
    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: 'assets',
    // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
    lintOnSave: true,
    //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
    runtimeCompiler: true,
    // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾  
    pro

最低0.47元/天解锁文章