1.解决页面空白,找不到资源

在项目根目录中的vue.config.js中publicPath: '/'修改为publicPath: './',如果没有这个文件,新建一个,基础代码为:

module.exports = {
publicPath: './',
outputDir: 'dist',
lintOnSave: true,
runtimeCompiler: true, //关键点在这
// 调整内部的 webpack 配置。
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// 配置 webpack-dev-server 行为。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
proxy: null, // string | Object
before: app => {}
}
}

2.解决路由不起作用:

将路由中的红框里面的注释掉,或者将history模式更改为vue项目默认的hash模式即可

vue3.0以上关于打包后出现空白页和路由不起作用的更多相关文章

  1. vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...

  2. vue.js 打包时出现空白页和路径错误

    vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...

  3. vue-cli 3.0生成的项目run build后为空白页

    vue-cli 3.0 生成的项目与2.x不同,其中并没有webpack配置文件config/index.js.这个时候需要我们在项目的根目录下创建一个vue.config.js文件,代码如下: mo ...

  4. vue项目打包后打开空白解决办法

    1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. a ...

  5. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

  6. vue-cli3项目打包后,在自己搭的服务器上访问打包好的页面空白,处理方法

    我用vue开发的一个小项目,项目开发出雏形,想打包一下放测试,但是我想放测试前自己检查一下经过npm run build打包生成的项目,在本地服务器能不能正常跑,于是,经过网上大哥的帮忙,写了个简易的 ...

  7. 如何解决vue2.0 打包之后 打开index.html出现空白页

    如何解决vue2.0 打包之后 打开index.html出现空白页 1.打包之前修改三个文件       1.1.第一步,找到build文件,在webpack.prod.conf.js 第25行左右 ...

  8. vue项目打包后一片空白及资源引入的路径报错解决办法

    网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...

  9. vue项目打包后在IE浏览器报错,页面显示空白

    之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开 找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目 ...

随机推荐

  1. win10下访问vm虚拟机Linux服务

    一.环境 win10操作系统 centos6.5 VMware® Workstation 14 Pro虚拟机 二.互相访问设置步骤 1.查看如下图所示 2.记住上面的IP和网关,进行如下图操作 点击应 ...

  2. MySQL中的数据类型 [数值型、字符串型、时间日期型]

    MySQL中的数据类型 [数值型.字符串型.时间日期型] MySQL中各数据类型 1. 数值类型(整型) 类型 数据大小 类型 (无符号:unsigned) 数据大小 存储空间 tinyint -12 ...

  3. SQLite基础-3.语法与数据类型

    目录 一.SQLite语法 1. 大小写敏感性 2. 注释 3. SQLite语句 二. SQLite 数据类型 1. Boolean 数据类型 2. Date 与 Time 数据类型 一.SQLit ...

  4. spring boot 2.0 提示 No primary or default constructor found for interface Pageable 解决办法

    在SpringBoot 2.0 以前,我们会配置以下类 @Configuration public class WebMvcConfig extends WebMvcConfigurerAdapter ...

  5. springboot打包的jar项目,不需要安装jdk环境启动

    因为服务器上是JDK7,而springboot至少用JDK8才行,但是又因为是很老的项目,不是很清楚能不能换JDK8,有风险,因此选择以前项目用JDK7,而新的springboot用JDK8.步骤一: ...

  6. STM32的堆与栈与编译信息查看

    STM32的堆与栈与编译信息查看 因为一个项目中使用malloc函数动态分配内存400多个字节,返回为0,分配失败.查找失败原因,为堆空间不足分配导致.查看堆和栈分别设置了2K,按正常情况看应能满足分 ...

  7. lua的数据类型

    Lua 是动态(弱)类型的语言,它有一下几种数据结构: nil(空) nil 类型表示一种没有任何有效值,它只有一个值 -- nil,例如打印一个没有赋值的变量,便会输出一个 nil 值: print ...

  8. git的常用指令(二) git add -A 、git add . 和 git add -u

    git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件. git add -u :他仅监控 ...

  9. css;js学习(一)

    推荐基础前端学习地址https://ke.qq.com/course/315961蝉壳学院 清除浮动 .clearfix:before,.clearfix:after{ content: " ...

  10. Linux之远程文件传输

    1)scp scp命令用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器硬盘变为只读re ...