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

Detailed explanation of the MySQL MVCC mechanism principle

Table of contents What is MVCC Mysql lock and tra...

Implementation steps of mysql master-slave replication

Table of contents mysql master-slave replication ...

Simple web design concept color matching

(I) Basic concepts of web page color matching (1) ...

How to use multi-core CPU to speed up your Linux commands (GNU Parallel)

Have you ever had the need to compute a very larg...

WeChat applet to determine whether the mobile phone number is legal example code

Table of contents Scenario Effect Code Summarize ...

CSS scroll-snap scroll event stop and element position detection implementation

1. Scroll Snap is a must-have skill for front-end...

Detailed explanation of nginx shared memory mechanism

Nginx's shared memory is one of the main reas...

Execute initialization sql when docker mysql starts

1. Pull the Mysql image docker pull mysql:5.7 2. ...

Solution to ONLY_FULL_GROUP_BY error in Mysql5.7 and above

Recently, during the development process, the MyS...

Docker image cannot be deleted Error: No such image: xxxxxx solution

Preface The docker image cannot be deleted. Check...

Detailed explanation of 8 ways to pass parameters in Vue routing components

When we develop a single-page application, someti...

Detailed explanation of MySQL 8's new feature ROLE

What problems does MySQL ROLE solve? If you are a...

NestJs uses Mongoose to operate MongoDB

I recently started learning the NestJs framework....

Three Ways to Lock and Unlock User Accounts in Linux

If you already have some kind of password policy ...