使用 vue-cli 遇到的坑1 - 打包后显示空白

最新推荐文章于 2024-06-27 09:52:10 发布
最新推荐文章于 2024-06-27 09:52:10 发布
阅读量265 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42334965/article/details/88723738
版权

输入 npm run build 打包后显示空白解决方法

1. 打开 config 文件夹里的 index.js 文件。

在这里插入图片描述

找到 build 下面的 assetsPublicPath，将原来的assetsPublicPath: '/'修改为assetsPublicPath: './'

在这里插入图片描述

2.打开 build 文件夹里的 utils.js，

在这里插入图片描述

在下图位置添加 publicPath: '../../'

在这里插入图片描述
参考资料：https://www.jb51.net/article/127345.htm

Ca+Zn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。 首先，让我们来深入了解...
解决vue-cli webpack打包后加载资源的路径问题
12-10
vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片空白 解决办法： config/index.js文件的build->...
vue-cli 项目打包优化-基础篇
最新发布
这个人很懒~
06-27 411
根目录下新建【.env.development】【.env.production】【.env.test】，生产、开发、测试环境。参考文档：https://cli.vuejs.org/zh/guide/mode-and-env.html。参考视频地址：https://www.bilibili.com/video/BV1wt421p7yM。参考配置：https://cli.vuejs.org/zh/config。，根据与 后端 或 运维 沟通修改。根据不同环境做相应的配置。
使用 vue-cli-service build 打包的 vue 项目出现白屏
猛犸象
03-11 224
使用 vue-cli-service build 打包的 vue 项目出现白屏
关于vue-cli5脚手架打包后本地运行空白问题
a820206256的博客
01-10 600
如果我们直接npm run build打包到本地后，运行是空白的，我们需要去vue.config.js里配置才能正常在本地显示，直接打包通过控制台会发现各种文件找不到。下面我就来教大家如何打包本地预览。我们可以发现官方引入了一个函数叫：createWebHashHistory。此时我们在本地打包后运行就不会再出现空白了。在router下的index.js里。完了我们去vue.config.js里修改。通过查看官方文档，我们发现官方是这样写的。
vue-cli项目打包后运行页面空白
qq_38913900的博客
01-20 724
vue-cli项目打包后运行页面空白 可能情况：打包后文件路径不对，引用失败导致空白 解决方法： assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’; ...
vue项目使用vue-cli-plugin-electron-builder，打包时的一些坑
weixin_43185419的博客
12-21 3885
vue项目使用vue-cli-plugin-electron-builder，打包时的一些坑
vue-cli 项目中 vue-router 相关使用 ？
Wu hao's blog
09-01 704
import Vue from 'vue'; import VueRouter from 'vue-router'; import config from '@/config'; import store from '@/store'; import routes from './routes'; const { systemName } = config; Vue.use(VueRouter); // 获取路由白名单path合集 const whiteNames = (routers) =>.
vue-cli 项目打包后打开页面空白
小白阿里里的博客
08-26 9923
关于项目在打包后打开页面空白问题 在我们输入命令 npm run build 打包项目后在项目文件中会多出一个dist文件夹，打包后的文件就在该文件夹中，将里面的文件放在服务器上即可。 我第一次这样操作的时候，打开页面一片空白，调试模式下显示css,js全都是引入错误。 打开config文件夹下的 index.js 找到如下图所示区域： 可以看到 assetsPublicPat...
vue-cli3.0 打包空白 无任何报错(解决方法)
一只小白奔向大牛的故事
07-12 2998
npm run build打包之后上传到服务器后，index.html打开一片空白，vue-cli2.0是这么解决的: assetsPublicPath: './', 就多加个点就行 但是vue-cli3.0的时候得自己配置代理文件这个时候百度找了好多不好使可能是我太菜了,最后还是去的vue-cli官方找的,但是问题是打包空白什么都没有报错也没有,以下是我的解决办法: 第一步: //配...
Vue-cli打包后如何本地查看的操作
10-14
在开发完成后，Vue CLI 提供了打包功能，将应用编译成生产环境可用的静态资源。这些资源通常保存在 `dist` 目录下，以便部署到 HTTP 服务器上。然而，为了在本地环境中预览打包后的应用，我们需要模拟一个 HTTP ...
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
10-17
在使用 Vue-cli3 创建的项目中，可能会遇到在安卓低版本系统或 Internet Explorer（IE）浏览器上出现白屏的问题。这通常是由于这些老旧平台不支持 ES6 以上的语法和某些新特性导致的。为了解决这个问题，我们需要...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
通过Vue-cli进行webpack打包的坑 Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。  我是通过将项目/config下的index.js的assetsPublicPath变成’./’，变成相对...
vue-cli3多页面配置demo
10-10
Vue CLI 3 是 Vue.js 官方提供的一个脚手架工具，用于快速搭建 Vue.js 应用程序。在创建项目时，默认配置生成的是单页面应用（SPA）。然而，有些项目可能需要构建多个独立的 HTML 页面，这就需要进行多页面配置。`...
VUE : vue-cli中去掉路由中的井号#操作
10-14
在Vue.js开发中，我们经常会使用Vue CLI来创建和管理项目。Vue CLI提供了一套便捷的脚手架工具，帮助开发者快速搭建应用。在默认情况下，Vue CLI生成的项目使用的是Hash模式的路由，这会在URL中显示一个“#”符号，...
vue打包后显示空白正确处理方法
08-28
然而，有时在执行 `npm run build` 命令进行打包后，可能会遇到浏览器中显示空白页的问题。这个问题通常是由于多种原因导致的，包括路径错误、公共路径配置不正确、资源加载失败等。以下是一些解决 Vue 打包后显示...
vue-cli3.0实现一个多页面应用的历奇经历记录总结
10-15
1. **打包后页面显示空白**：这可能是因为路由模式设置不当。Vue CLI 3.0 默认使用 `history` 模式，这种模式下，需要服务器配置支持。如果无法更改服务器配置，可以将路由模式改为 `hash` 模式，通过在 `router.js`...
vue-cli-service开发环境怎么打包
06-04
要打包 Vue.js 应用程序，可以使用 vue-cli-service 提供的 build 命令，该命令会执行以下操作： 1. 读取项目中的配置文件，如 babel.config.js、postcss.config.js、vue.config.js 等； 2. 通过 webpack 构建器对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值