Vue打包后页面出现空白的问题如何解决

这篇文章主要介绍“Vue打包后页面出现空白的问题如何解决”，在日常操作中，相信很多人在Vue打包后页面出现空白的问题如何解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue打包后页面出现空白的问题如何解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一、 vue-cli创建项打包后打开页面为空白的问题解决

命令行输入：npm run build

打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。

二、打包完成后配置会自动生成vue.config.js文件，这个文件非常重要值得你收藏

配置如下：

const path = require("path");const resolve = function(dir) {  return path.join(__dirname, dir);};module.exports = {  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",  outputDir: "dist",  assetsDir: "static",  lintOnSave: true, // 是否开启eslint保存检测  productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap  chainWebpack: config => {    config.resolve.alias      .set("@", resolve("class="lazy" data-src"))      .set("@v", resolve("class="lazy" data-src/views"))      .set("@c", resolve("class="lazy" data-src/components"))      .set("@u", resolve("class="lazy" data-src/utils"))      .set("@s", resolve("class="lazy" data-src/service"));     config.optimization.runtimeChunk("single");  },  devServer: {    // host: "localhost",        //host: "192.168.1.107",    host: "0.0.0.0", //局域网和本地访问    port: "8080",    hot: true,        open: false,    overlay: {      warning: false,      error: true    },        proxy: {      "/api": {                target: "http://m260048y71.zicp.vip", //        // target: "http://192.168.1.102:8888", //                changeOrigin: true,        ws: true,        pathRewrite: {          "^/api": ""        }      }    }  }};

第三个问题：router-view中的内容显示不出来。路由history模式

这个坑是当你使用了路由之后，在没有后端配合的情况下就手贱打开路由history模式的时候，打包出来的文件也会是一片空白的情况，
解决：在 router.js 中将 mode: history注释掉

到此，关于“Vue打包后页面出现空白的问题如何解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！