vue.js打包项目后页面出现空白的解决办法

相信很多刚刚接触vue的伙伴会遇到这样的问题，就是说vue项目在开发环境下一切正常，但是打包之后，打开index.html页面却是一片空白，打开控制台发现这样的错误

出现这种情况要分两个处理方式（vue-cli2和vue-cli3），先说vue-cli2； 首先找到config/index.js文件，将assetPublicPath的路径改为“./”即可，

vue-cli3的话要稍微麻烦些，因为vue-cli3简洁了许多，没有了配置文件，所以需要自己创建，只能在项目的根目录下创建，并且文件的名字只能是vue.config.js，然后在这个文件里面加上下面的代码即可

module.exports = {
    assetsDir: 'static',
    parallel: false,
    publicPath: './',
}

到了这步本来就可以了，但是有的小伙伴还是没有显示出来，那是因为你的路由模式的关系，你把你的路由模式改成“hash”就行了，虽然有点丑陋，但是至少功能出来了，如果你不想使用“hash”模式，非要用历史模式的话，本地是不行的，必须要服务器配合，这里就说下怎么使用nginx配合vue使用历史模式

安装nginx就不说了 ，假设你已经安装好了nginx，在server里面加上

location /aaa {undefined
            alias   D:/bbb/ccc;
            index  index.html index.htm;
            try_files $uri $uri/ /aaa/index.html;
        }

其中/aaa是需要访问的地址， D:/bbb/ccc是你文件真实存放的路径，index指的就是你的入口文件，你的文件名如果不是index.html的话就替换成你的入口文件的名字，这里面最重要的是 try_files $uri $uri/ /aaa/index.html 这句话，这句话主要就是用来处理vue的历史模式的，在配置完nginx后, 还要在项目里面加点东西, 其实也很简单, 就在项目的src目录里面加上

在config/index.js里面加上

就可以了, 不然的话刷新页面就会报错404, 当然这是把项目放在二级路由的情况下, 如果是一级路由的话就可以不用加base这个属性, 

最终效果如下。

这里就完成了vue打包到部署的流程了，希望对大家有些许的帮助吧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

    在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览.根据官网打包出来的html直接打开是显示空白. vue打包后显示空白正确处理方法是 1.找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2.修改 找到对应的位置加上publicPath: '../../' 然后就成功了! 很多朋友还遇到这样的问题 vue打包后index文件一片空白,怎么回事呢? vue项目你npm run build打包后,点开index文件打开一片空白, 并报错解决方法:路径问题, 总结 以

  • vue.js 打包时出现空白页和路径错误问题及解决方法

    vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性: assetsPublicPath属

  • Vue打包后页面出现空白解决办法

    一. vue-cli创建项打包后打开页面为空白的问题解决 命令行输入:npm run build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目. 二.打包完成后配置会自动生成vue.config.js文件,这个文件非常重要值得你收藏 配置如下: const path = require("path"); const resolve = function(dir) { return path.join(__dirname, dir); }; module.expo

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

    网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. module.exports = { build: { env: require('./prod.env'), index: path.resolve(__

  • vue.js打包项目后页面出现空白的解决办法

    vue.js打包项目后页面出现空白的解决办法

    相信很多刚刚接触vue的伙伴会遇到这样的问题,就是说vue项目在开发环境下一切正常,但是打包之后,打开index.html页面却是一片空白,打开控制台发现这样的错误 出现这种情况要分两个处理方式(vue-cli2和vue-cli3),先说vue-cli2: 首先找到config/index.js文件,将assetPublicPath的路径改为"./"即可, vue-cli3的话要稍微麻烦些,因为vue-cli3简洁了许多,没有了配置文件,所以需要自己创建,只能在项目的根目录下创建,并且

  • Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原

  • vue.js iview打包上线后字体图标不显示解决办法

    在vue+cli项目中使用iview组件及icon图标,打包后icon不显示,解决办法: 1.在build文件夹下找到utils.js文件,把publicPath改为 ../../ if (options.extract) { return ExtractTextPlugin.extract({ publicPath:'../../', use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader

  • vue+webpack 打包文件 404 页面空白的解决方法

    最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行, 例如 :nginx vue单页面的启动页面是index.html,路由的路径实际是不存在的,所以会出现刷新页面404的问题,需要设置所有找不到的路径直接映射到index.html 1 刷新页面404 配置启动文件的index页面的路径root: D:/workPlace

  • 解决vue打包项目后刷新404的问题

    vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu

  • vue cli实现项目登陆页面流程详解

    vue cli实现项目登陆页面流程详解

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求 3.2.3 发送post请求 3.2.4 简化axios使

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • Vue路由传参页面刷新后参数丢失原因和解决办法

    目录 vue路由传参方法 原因分析: 解决方案: 总结 vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({ path: "/test", query: { a: 1, b: 2 } }) 这样我们就传递了两个参数,在 /test  页面 就可以接收这两个参数 let a = this.$route.query.a; let b = this.$route.query.b; 可以看到浏览器进行了url参数

随机推荐