Solution to blank page after Vue packaging

1. Solve the problem that the open page is blank after vue-cli creates the item package

1. Command line input: npm run build

After packaging, there will be an additional folder dist in the project. This is the project after we have packaged it.

2. After the packaging is completed, the configuration will automatically generate the vue.config.js file, this file is very important and worthy of your collection

The configuration is as follows:

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")); /* 别名配置 */
    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": ""
        }
      }
    }
  }
};

The third problem: the content in router-view is not displayed. Routing history mode

This pit is when you open the routing history mode without back-end cooperation after you use routing, the packaged files will also be blank.

Solution: Comment out mode: history in router.js

The very precious config.js file is worthy of your collection

Welcome to join the group for technical discussions, group number: 954314851