一、 -cli建立項打包後開啟頁面為空白的問題解決

命令列輸入：npm run build

打包出來後項目中就會多了一個資料夾dist，這就是我們打包過後的專案。

二、打包完成後配置會自動生成vue.config.檔案，這個檔案非常重要值得你收藏

配置如下：

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("src"))
      .set("@v",resolve("src/views"))
      .set("@c",resolve("src/components"))
      .set("@u",resolve("src/utils"))
      .set("@s",resolve("src/service")); /* 別CghpPLV
 
名配置 */
    config.optimization.runtimeChunk("single");
  },devServer: {
    // host: "localhost",/* 本地ip地址 */
    //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模式的時候，打包出來的檔案也會是一片空白的情況，
解決：在 rouhttp://www.cppcns.comter.js 中將 mode: history註釋CghpPLV掉

到此這篇關於Vue打包後頁面出現空白解決辦法的文章就介紹到這了,更多相關Vue打包頁面出現空白內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！