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

In IIS 7.5, HTML supports the include function like SHTML (add module mapping)

When I first started, I found a lot of errors. In...

Win10 installation Linux system tutorial diagram

To install a virtual machine on a Windows system,...

Get a list of your top 10 most frequently used terminal commands in Linux

I think the commands I use most often are: Choice...

Text pop-up effects implemented with CSS3

Achieve resultsImplementation Code html <div&g...

Solution to the error reported by Mysql systemctl start mysqld

Error message: Job for mysqld.service failed beca...

Front-end state management (Part 2)

Table of contents 1. Redux 1.1. Store (librarian)...

In-depth explanation of Mysql deadlock viewing and deadlock removal

Preface I encountered a Mysql deadlock problem so...

How to implement Linux automatic shutdown when the battery is low

Preface The electricity in my residence has been ...

Detailed explanation of various usages of proxy_pass in nginx

Table of contents Proxy forwarding rules The firs...

Introduction to CSS3 color value RGBA and gradient color usage

Before CSS3, gradient images could only be used a...

uni-app WeChat applet authorization login implementation steps

Table of contents 1. Application and configuratio...

The difference between z-index: 0 and z-index: auto in CSS

I've been learning about stacking contexts re...

Tutorial on installing DAMO database on Centos7

1. Preparation After installing the Linux operati...

Disable IE Image Toolbar

I just tried it on IE6, and it does show the toolb...