vue-cli3.0以上打包后index.html打开是空白的不显示解决方案

置顶 已于 2022-07-28 14:20:02 修改
阅读量2.2k 收藏 4
点赞数
分类专栏： 前端 文章标签： vue javascript vue.js html5
于 2020-07-16 09:31:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41884808/article/details/107375913
版权

**

vue-cli3.0以上打包后index.html打开是空白的不显示解决方案

**

昨天，写了一个简单的项目官网，本来挺简单的一个项目，结果打包的时候出问题了。项目是同事搭建的，她是Vue3.0以上的版本，而我的是2.9的版本。我们打包都不成功。

#2.0版本
在2.X版本以前，项目都是有个config文件夹的，在index.js里修改build下面修改下静态资源的路径，assetsPublicPath加个点。如图
2.0版本项目结构

##3.0以上
那么3.0以上怎么办，也简单，分两步走
1.在router的index.js中也就是配置路由的文件里，将mode改为hash模式，
路由文件模式
2.修改配置文件
3.0以后没有config文件，那么就需要在根目录下建立一个vue.config.js。我看有很多帖子都有说，我想说的是，不需要写那么多配置，只需三行就能解决这个问题，当然我这个就是一个官网，没那么多要求，如果还有其他的一些需求，也可以继续增加配置，一般来讲，像我这种简单的项目就够用了。上图。
配置文件
好了，只需两步，解决了。是不是很简单？

管小姐的斐波那契
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为什么Vue打包出来的项目是空白页面？
Alanrnzearn的博客
07-08 3127
        有时候稍微没注意，用Vue打包出来的项目经过本地直接打开时发现竟然是空白页面！         1. 最直接的原因就是在打包项目的时候忘记创建vue.config.js文件了，这个时候在原Vue项目底下新建vue.config.js文件，内容为： module.exports = { publicPath:'/', out
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
12-02
前言：最近用vue-cli 3.0 构建一个小型的工单管理系统，完工后build发现一个chunk-vendors包就达到985kb，加上其他一些资源文件，首页的下载总共大小快要2M。测试给的第一个反馈就是首屏慢慢慢慢慢！ 根据首屏加载...
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
01-21
使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了，一直没机会升级3.0版本 开始零零碎碎开始写一些功能，顺便分享一下 const path = require('path') const glob = require('glob') /** 获取多页的入口脚本和模板 */ const getPages = (() => { const [ globPathHtml, globPathJs, pages, tempSet ] = [ ['./src/modules/**/index.html', 'template'], // 入口模板正则 ['./src
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
青春木鱼的博客
07-14 1万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
vue3 vite打包之后访问不显示页面
最新发布
lie_sun
05-27 221
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
解决Vue3项目打包后dist中的index.htm无法用浏览器直接打开
普通人一枚
12-09 2624
创建一个服务器来访问资源（最简单了，不过要有环境，普通电脑还是不行，其他方式参考其他帖子）：可以打开浏览器在localhost:8080中查看了，访问成功！
Vue3 打包部署后空白 且没有报错信息
qq_40266212的博客
04-20 1354
Vue3 打包部署后空白 没有报错信息 记录一下 是router的问题，在router下的index.ts中使用createWebHashHistory const router = createRouter({ history: createWebHashHistory(process.env.BASE_URL), routes })
vue项目打包后页面访问不到
前端黄晨琼的博客
11-26 1917
vue项目打包后页面访问不到 解决办法 在config 的index.js上修改成图片所示 第二步 将build下的utils文件里标记位置加上 publicPath: ‘…/…/’, 之后打包即解决
vue-cli3打包的html显示空白
李振恒
04-30 420
在项目根目录下，新建一个vue.config.js文件 内容为： module.exports = { // 基本路径 publicPath: ‘./’, // 输出文件目录 outputDir: ‘dist’, configureWebpack: { externals: { } } } 再npm run build一下，看是不是可以浏览器打开index.html文件啦！！ 如果还是不可以，...
详解如何配置vue-cli3.0的vue.config.js
12-02
本文介绍了如何配置vue-cli3.0的vue.config.js，分享给大家，具体如下： vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由...
去掉首页index.html ___________
weixin_42572968的博客
11-05 2302
RewriteCond %{REQUEST_URI} ^(/index\.html)$ [NC] RewriteRule ^(.*) / [R=301,L] RewriteCond %{REQUEST_URI} !^(/index\.html)$ [NC] RewriteCond %{REQUEST_URI} (/index\.html)$ [NC] RewriteRule (.+)/index\...
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
01-21
1.在vue项目根目录下新建vue.config.js（不是在src下面） vue.config.js配置文件： module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtim
Vue3 创建项目遇到的问题汇总
BigOrange的博客
09-01 1万+
1.Uncaught SyntaxError:2. ` Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp.3 typeError: : Failed to fetch dynamically imported module;net::ERR_ABORTED 404;5JavaScript Uncaught RangeError: Maximum call stack
解决vue3打包之后dist文件夹下index.html不显示的问题
qq_45079530的博客
03-02 3473
1、当我用vue3的脚手架生成一个项目，npm run build打包成功之后，结果却显示出了空白页，按f12检查了一下报错，如图所示： 说是我的js文件和css等文件的路径找不到，网上搜索发现是因为vue-cli3简洁了许多，没有了配置文件，默认公共路径是'/'，所以需要自己创建配置文件去更改路径，配置文件只能在项目的根目录下创建（跟src文件平级），并且文件的名字只能是vue.config.js，然后在这个文件里面加上下面的代码即可： module.exports = { public
vue-cli3与后台进行对接
小钻风的博客
05-05 1757
1、首先vue-cli3没有index.js文件，要在根目录下创建 vue.config.js （可完全复制） const path = require("path"); const webpack = require("webpack"); // const glob = require("glob-all"); // const PurgecssPlugin = require("purgec...
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
weixin_56035334的博客
07-11 7486
1.github是不是不能部署带有接口项目的前台电商项目啊 是不是得买服务器才能在线看啊 静态的我会部署，但是这个电商项目带了接口，我想应该不可以就这样放上去的 2.用npm run bulid打包后的index是不是不能直接打开。我百度了方法，都是让我改路径，但是他们都用webpack打包的，我这个是用npm init初始化的，并没有webpack下面的路径，所以我也改不了 3.那要怎么把这个前台项目部署到服务器上呢，是不是只能买个服务器来部署呀！！我主要想实现在线预览，给别人也可以看到做过的项目，
vue3.x版本打包之后的index.html打开空白
yanhailun的博客
04-08 806
index.html打开之后是空白是因为文件的资源路径不对，这个时候我们需要在根目录下创建一个vue.config.js: 在里面添加配置： module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' } 如果是3.3版本之下的，就把publicPath换成baseUrl ...
vue项目页面空白的几个原因及解决办法
热门推荐
xin123____的博客
03-11 4万+
会出现vue项目页面空白，通常问题是在于路由上，可能是以下几种原因： 1.路由重复。 如果配置了两个路由是重复的，比如配置了两个【path: ‘/’】，那么访问就会看到空白页面，这时候改下重复的路由配置即可。 2.路由没有配置。 如果没有配置路由，那么访问的页面也可能是空白页，比如访问/yanggb，但是路由里却没有配置，这时候配置上丢失的路由配置即可。 3.路由配置指向页面为空白页。 这种情况就比较玄乎了，配置了指向的页面什么都没有，展示自然也是空白页。 总结 当然可能还会有别的原因导致vue项目出现空白
vue/cli3.0脚手架部署到nginx时页面空白问题解决办法
止水
01-21 1万+
首先，明确一下问题 vue/cli3.0部署到nginx出现页面白屏，不能正常显示网页内容，利用F12，经过初步判断，是路径设置问题。 然后，对比一下2.0与3.0. 先对比一下两个版本脚手架的目录结构 2.0目录结构 3.0目录结构 可见，vue-cli3.0与2.0有一个不同之处是3.0脚手架中没有build和config文件，在往nginx中部署2.0时，我们可以通过修改build和...
vue-cli3.0中的process.env.NODE_ENV
09-14
在Vue CLI 3.0中，process.env.NODE_ENV是一个全局变量，用于获取当前的环境模式。它的值可以是以下三种之一： 1. development：在开发模式下使用，通常用于本地开发调试。 2. production：在生产模式下使用，用于构建部署生产环境的代码。 3. test：在测试模式下使用，用于运行测试代码。 根据不同的环境模式，我们可以在项目中进行一些配置上的区分，例如设置不同的API地址、启用不同的插件等。通过使用process.env.NODE_ENV，我们可以根据当前的环境来做出不同的配置决策。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值