vue-cli打包之后页面为空的问题。

做了一个demo,想看一下打包之后的样子,发现页面是空的。

发现问题就要解决:

1.首先看控制台没有报任何错误,那就证明我们的代码是没有任何问题的。

只能是路径问题造成的。

2.在路由router/index.js中加入一个404页面,代码引入创建之类的就不说了。也就是说只要路径错误,Error这个vue组件就会显示

{
      path: ‘*‘,
      name: ‘404‘,
      component: Error,
      hidden: true
    }

3.再打包,发现新增的Error果然出现。

4.再次证明是路径问题,想到路由有个mode模式

之前考虑到原先的默认模式(也就是地址后面带"#")很不习惯,所以改为history模式了

export default new Router({
  mode:‘history‘,
  routes: [
    {
。。。

5.看下是不是这个问题

把history模式去掉

再打包

OK,一切正常

补充一下:

看一下config/index.js 里面

把绝对路径改为相对路径!!!!!

原文地址:https://www.cnblogs.com/chinabin1993/p/8143456.html

时间: 2024-10-05 03:33:31

vue-cli打包之后页面为空的问题。的相关文章

vue项目打包之后页面空白解决办法

之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPublicPath 在config/index.js里面,有个 assetsPublicPath 属性,源码是'/',修改成'./',加个点 assetsPublicPath: '/',二.路由模式将histroy改成hash模式,起初 mode:'history' const router = new

用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 6.10.3 的版本,相对稳定. 2.使用 npm 管理依赖 使用 node 自带的包管理工具 npm 管理项目中的依赖,由于 npm 的服务器在国外.经常会遇到速度奇慢或者下载不下来依赖的情况,所以推荐使用淘宝镜像. npm install-g cnpm--registry=https://reg

vue.cli脚手架初次使用图文教程

vue.cli脚手架初次使用图文教程 我之前的环境是安装了node.js, 我记得曾经好像安装过vue ,不过现在又要重新开始学习起来了.在youtube上看了一vue的相关教程,还是需要实操的. 好像安装过npm -v 发现已经安装了5.6.0 需要安装然后使用 cnpm 安装 vue-cli 和 webpack 安装代码:npm install -g vue-cli 一.生成项目 首先需要在命令行中进入到项目目录,然后输入: vue init webpack vue-testone p.p1

vue cli 3.x 项目部署到 github pages

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

使用vue cli开发项目中遇到的坑

一.部署文件 使用vue cli 开发项目,执行npm run build命令生成dist静态文件,将dist文件包放到服务器中即可. 刚接触webpack,不知道怎么部署前端文件,原以为需要将app文件上传,在 inux上安装node,以及npm install 一系列的包,捣鼓了很久,发现只需要执行 npm run build 将源码打包成一个静态文        文件即可,上传静态文件dist,将 controller指向index.html. 二.跨域问题 实行前后端分离,使用vue i

webpack打包多页面的方式

一开始接触webpack是因为使用Vue的关系,因为Vue的脚手架就是使用webpack构建的.刚开始的时候觉得webpack就是为了打包单页面而生的,后来想想,这么好的打包方案,只在单页面上使用是否太浪费资源了呢?如果能在传统多页面上使用webpack,开始效率是否会事半功倍呢?好在众多优秀的前端开发者已经写了许多demo和文章供人学习.我也写了一个小项目,希望对大家学习webpack有帮助. webpack-multi-page   项目解决的问题 SPA好复杂,我还是喜欢传统的多页应用怎么

Vue Cli搭建域名服务器常见问题

Vue Cli搭建域名服务器常见问题 Vue Cli不使用反向代理配置域名 通过npm run serve命令执行Vue项目只能通过IP地址来访问,即使域名服务中设置DNS依然访问不到.有以下三种解决办法: 1.修改项目根目录下[email protected]\cli-service\lib\options.js文件 //第133行 devServer: { /* open: process.platform === 'darwin', host: '0.0.0.0',//改为域名 port:

浅入深出Vue:第一个页面

今天正式开始入门篇,也就是实战了~ 首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧. 准备工作 新建一个vue项目(可以参考基础篇里的搭建方法,也可以参考官网现在最近的 Vue CLI 3.x进行可视化创建和管理 安装 vue-router 安装 elementui 以上的操作都可以在之前的博文中(基础篇)找到完整步骤,这里就不重复了. 我们做完准备工作之后,目录结构如下: 我们来看看这个目录: |--public 公共