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

Vue implements card flip carousel display

Vue card flip carousel display, while switching d...

Tutorial on installing Odoo14 from source code on Ubuntu 18.04

Table of contents Background of this series Overv...

Example of using MySQL to count the number of different values ​​in a column

Preface The requirement implemented in this artic...

Learn how to use the supervisor watchdog in 3 minutes

Software and hardware environment centos7.6.1810 ...

How to understand SELinux under Linux

Table of contents 1. Introduction to SELinux 2. B...

Solution to mysql login warning problem

1. Introduction When we log in to MySQL, we often...

Several commonly used single-page application website sharing

CSS3Please Take a look at this website yourself, ...

Detailed explanation of the use of MySQL mysqldump

1. Introduction to mysqldump mysqldump is a logic...

Things to note when writing self-closing XHTML tags

The img tag in XHTML is so-called self-closing, w...

Ubuntu installation cuda10.1 driver implementation steps

1. Download cuda10.1: NVIDIA official website lin...

Solution to 1290 error when importing file data in mysql

Error scenario Use the mysql command in cmd to ad...

mysql error number 1129 solution

SQLyog connects to mysql error number 1129: mysql...