Solution to blank page after Vue packaging

Solution to blank page after Vue packaging

1. Solution to the problem that the page is blank after the vue-cli creates the project package

Command line input: npm run build run build

After packaging, there will be an additional folder dist in the project, which is our packaged project.

2. After packaging is completed, the configuration will automatically generate the vue.config.js file. This file is very important and worth 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, // Whether to enable eslint save detection productionSourceMap: false, // Whether to generate sourceMap when building production packages
  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")); /* alias configuration*/
    config.optimization.runtimeChunk("single");
  },
  devServer: {
    // host: "localhost",
    /* Local IP address*/
    //host: "192.168.1.107",
    host: "0.0.0.0", //LAN and local access port: "8080",
    hot: true,
    /* Automatically open the browser */
    open: false,
    overlay:
      warning: false,
      error: true
    },
    /* Cross-domain proxy */
    proxy: {
      "/api": {
        /* Target proxy server address*/
        target: "http://m260048y71.zicp.vip", //
        // target: "http://192.168.1.102:8888", //
        /* Allow cross-domain */
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

The third problem: the content in router-view cannot be displayed. Routing history mode

The pitfall is that after you use the router, if you open the router history mode without the backend's cooperation, the packaged file will be blank.
Solution: Comment out mode: history in router.js

This is the end of this article about how to solve the blank page after Vue packaging. For more related Vue packaging page blank content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • vue+webpack package file 404 blank page solution
  • A brief discussion on how to package the Vue project and throw it to the server
  • Vue3 has no config folder and the page is blank after packaging

<<:  Kali Linux installation VMware tools installation process and VM installation vmtools button gray

>>:  sql script function to write postgresql database to implement parsing

Recommend

A brief introduction to MySQL dialect

Putting aside databases, what is dialect in life?...

Simple steps to create a MySQL container with Docker

Preface We have already installed Docker and have...

MySQL 8.0 Window Function Introduction and Summary

Preface Before MySQL 8.0, it was quite painful to...

Detailed explanation of Nginx regular expressions

Nginx (engine x) is a high-performance HTTP and r...

Detailed explanation of lazy loading and preloading of webpack

Table of contents Normal loading Lazy Loading Pre...

Summary of MySQL view principles and usage examples

This article summarizes the principles and usage ...

Solution to invalid margin-top of elements in div tags

Just as the title says. The question is very stran...

Vue computed properties

Table of contents 1. Basic Examples 2. Computed p...

Tutorial on installing Ceph distributed storage with yum under Centos7

Table of contents Preface Configure yum source, e...

How to set the number of mysql connections (Too many connections)

During the use of mysql, it was found that the nu...

How to make JavaScript sleep or wait

Table of contents Overview Checking setTimeout() ...

10 SQL statement optimization techniques to improve MYSQL query efficiency

The execution efficiency of MySQL database has a ...

Detailed steps for deploying Tomcat server based on IDEA

Table of contents Introduction Step 1 Step 2: Cre...