关于vue-cli5脚手架打包后本地运行空白问题

原创 已于 2023-01-10 00:43:58 修改 · 706 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2023-01-10 00:42:36 首次发布
文章介绍了在Vue项目中，使用npmrunbuild打包后出现空白页面的问题，以及如何通过修改vue.config.js中的publicPath为./，以及在router的index.js中引入createWebHashHistory函数来解决文件找不到和本地预览不正常的情况。

如果我们直接npm run build打包到本地后，运行是空白的，我们需要去vue.config.js里配置才能正常在本地显示，直接打包通过控制台会发现各种文件找不到。下面我就来教大家如何打包本地预览。

通过查看官方文档，我们发现官方是这样写的。

 我们可以发现官方引入了一个函数叫：createWebHashHistory

我们跟着改。在router下的index.js里。

 然后引入，添加

然后在最下面

 完了我们去vue.config.js里修改

publicPath: './',

此时我们在本地打包后运行就不会再出现空白了。也不报错。看看成果

OK，大功告成！ 

【已解决】VUE3+webpack ＞5报错问题
rgg_cc的博客
08-11 8388
This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "process": require.resolve("process/browser") }' - install 'p
vuecli4升级到vuecli5踩坑记录
chunru_liu的博客
03-30 1万+
项目以来的module版本很新，用到了es2020的语法，在vuecli4版本上死活编译不成功，升级5后解决，这个过程中在配置vue.config.js中遇到了很多问题，记录下来或许能给其他人提供帮助~ vuecli官网英文已经更新为最新的cli5但中文还停留在cli4，导致我最开始在查资料时一直没有查到官方资料，后来偶然间切换英文才发现。 1.配置scss，pretendData变为additionalData 2.启用css moudles 这个vuecli官网也有记录Working wi.
vue3.x 关于引入第三方组件报错
E_ISOLATE的博客
07-19 3560
main.js之前的写法 import Vue from 'vue' import App from './App.vue' import router from './router/index' import store from './store' import 'element-ui/lib/theme-chalk/index.css'; import ElementUI from 'element-ui'; Vue.use(ElementUI); new Vue({ router, st
vue build 设置了 publicPath: “./“ 后页面空白
编程之路
06-02 1338
知识点记录
vue项目打包后无法运行报错空白页面
总结前端开发中遇到的问题，分享前端知识
09-11 1149
控制台报错： 解决方式：修改文件 config/index.js 找到assetsPublicPath build: { ... //assetsPublicPath: '/', assetsPublicPath: './',//修改 .... } 重新打包，运行
Vue-cli打包后如何本地查看的操作
10-14
Vue CLI 是一个由 Vue.js 团队开发的命令行工具，用于快速搭建 Vue.js 应用的脚手架。在开发完成后，Vue CLI 提供了打包功能，将应用编译成生产环境可用的静态资源。这些资源通常保存在 `dist` 目录下，以便部署到 ...
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
10-17
完成以上五步后，Vue-cli3 项目在低版本安卓系统和 IE 浏览器上白屏的问题通常能得到解决。在实际应用中，可能还需要根据项目的具体需求和错误信息进一步调整配置。同时，考虑到性能优化，可以考虑使用 Bundle ...
vue-cli脚手架教程
最新发布
刻苦的樊同学
11-12 3103
安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。这是因为引用资源的路径问题，我们只要在下图的地方修改一下再打包就可以了，需要修改的文件在项目目录下的config文件夹里的index.js文件中。在projectname项目目录下执行 npm run build ，打包项目，打包完成之后，我们就可以像打开静态网页一样打开我们完成的项目。这样父组件的变量就传到了子组件，然后子组件使用如下方式接收，这样在子组件中就可以使用变量了，例如：{{username}}
VUE : vue-cli中去掉路由中的井号#操作
10-14
Vue CLI提供了一套便捷的脚手架工具，帮助开发者快速搭建应用。在默认情况下，Vue CLI生成的项目使用的是Hash模式的路由，这会在URL中显示一个“#”符号，如 `http://example.com/#/home`。然而，在某些场景下，比如...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。  我是通过将项目/config下的index.js的assetsPublicPath变成’./’，变成相对路径，进行解决。 cd vue demo ...
vue-cli中打包后，页面空白，路径错误.
weixin_45932733的博客
04-06 332
在vue项目中，打包后出现这个问题，仔细一看原来是路径问题。 解决方法：在项目中添加vue.config.js文件，内容如下： 1.在vue-cli.3.3版本之前 module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' } 2.在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath module.exports = { publicP.
vue项目 ie浏览器下打开页面空白
weixin_30727835的博客
08-05 849
Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。 ie9和一些低版本的高级浏览器对es6新语法并不支持 导致 页面在ie浏览器不能正常展示，显示空白 babel提供了polyfill依赖，用来解决这一问题，方法如下： 首先安装依赖: npm install --save @babel/polyfill ...
vue-cli项目打包出现空白页和路径错误问题
xjf106的博客
03-22 386
本文转自：https://www.cnblogs.com/wanf/p/7871787.html vue-cli项目打包： 1、命令行输入：npm run build 打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。 第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。 解...
Vue在打包项目时显示空白页问题和一些解决思路
benlalagang的博客
08-01 8459
Vue在打包项目时显示空白页问题和一些解决思路、1.整体资源路径、2.路由模式、3.本地服务器的改变
VueCLI5.X版本构建项目(打包)本地打开报错
sunddy_x的博客
05-25 1051
报错截图： 报错分析： 跨源请求只支持协议方案:http, data, chrome, chrome-extension, chrome-untrusted, https。 解决方案： 1、把项目部署到服务器 2、在vscode安装插件Live Server 在html文件右键打开： 其他：在vue-cli5之前的版本中，打包项目是可以本地打开的，只要在vue.config.js 中配置 publicPath 选项，但是在vue-cli5中无效。查看了打包文件后，发现vue-cli5打包的in
【问题解决】@vue/cli 4.5.15脚手架搭建vue2项目时引入vue-router后页面空白问题
GUANYX的博客
02-16 1294
一、问题描述 用脚手架搭建vue2项目的时候，引入vue-router之后页面变成空白。 main.js如下： import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // //引入路由 import router from '@/router' new Vue({ router, render: h => h(App), }).$mount('#app') 开始报一系列类似
使用 vue-cli 遇到的坑1 - 打包后显示空白
qq_42334965的博客
03-21 320
输入 npm run build 打包后显示空白解决方法 1. 打开 config 文件夹里的 index.js 文件。 找到 build 下面的 assetsPublicPath，将原来的assetsPublicPath: '/'修改为assetsPublicPath: './' 2.打开 build 文件夹里的 utils.js， 在下图位置添加 publicPath: '../../'...
vue项目打包步骤
热门推荐
从零出发
06-25 31万+
vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变，如下图：点击index.html，通过浏览器运行，出现以下报错，如图：那么应该如下修改呢？具体步骤如下：1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到in...
vue项目打包后显示空白解决方案？
DW14687的博客
12-09 8872
目录前言一、页面空白？二、图片加载不出来？总结vue打包后会出现空白页面，这说明配置的时候路径有问题，接下来一起看看如何解决把。页面空白说明打包路径有问题，打开config/index.js，找到build下的assetsPublicPath，修改为'./'，如下：这里说一下，dev环境下 assetsPublicPath: '/'，表示项目根目录，build 环境下的 assetsPublicPath: './'，表示当前更目录配置完后打包发现有页面出现了注意：如果还没有页面出现，那可能是你的路由模式选用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值