How to solve the problem that after the vue3 project is packaged and published to the server, the access page displays blank

After the vue3 project is packaged and published to the server, the access page displays blank

1. Process the publicPath in the vue.config.js file

The processing is as follows:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    outputDir: 'dist',
    indexPath: 'index.html',
    lintOnSave: false,
    transpileDependencies: true,
})

2. Process the index.js file in the router folder

The processing is as follows: Use the modified part

import { createRouter, createWebHistory, createWebHashHistory  } from 'vue-router';
import routes from "./routes";

const router = createRouter({
    //history: createWebHistory(process.env.BASE_URL),//默认时
    history: createWebHashHistory(process.env.BASE_URL),//修改后
    routes
})
export default router;

to solve the above two steps. Solve the problem that the access page displays a blank page after the vue3 project is packaged and released to the server

The problem of a blank page being displayed when packaging the project and some solution ideas

We will package it after the project development is completed

npm run build

The files generated by packaging will be in the dist folder

But sometimes a blank page will appear when opening index.html

Next we start from Analyze from several aspects:

1. The overall resource path when packaging

According to the actual situation, it is necessary to judge whether it is / or ./

Configure in vue-ui:

##Configure in vue.config.js:

module.exports = {
//基本路径 文件打包后放的位置
publicPath:‘./'，
 
//默认输出文件夹为dist，填入的名字为打包后的文件名
outputDir:‘name',
 
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。资源放的目录
assetsDir: “./static”,
 
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 index的路劲和名字
indexPath: ‘./index.html',
 
//打包后是否生成map文件，map文件能看到错误代码位置，设置为false不生成map文件，打包体积缩小
productionSourceMap: false,
}

2. Routing mode

Yes Hash or historical mode

Recommended hash mode has higher compatibility# The path will not be sent to the server in the future to avoid some errors

const router = new VueRouter({
  routes,
  mode:'hash',
})

3. Reasons for switching between development and production environments

Because when we develop the environment

npm run serve simulates the local server

Packaging it into a dist folder causes the content in some changes such as the port to not be requested, resulting in a blank page

We can simply deploy the local server and let dist run

Create the folder

• Initialize npm in the folder terminal npm init -y

• Install express npm i express -S

• Copy dist to a new folder

• Create app.js and write code

Enable gzip to reduce the file size and make the transfer faster

• Installation corresponding Package npm install compression -p

• Import package const compression = require('compression')

• Enable middleware app.use(compression( ))

Use PM2 management application

• Install npm i pm2 -g

• Start the project: pm2 start .\app.js --Custom name

• View running project pm2 ls

• Restart project pm2 restart custom name (ID)

• Stop project pm2 stop custom name (ID)

• Delete project pm2 delete custom name (ID )

app.js：

const express = require('express')
const app = express()
 
const compression = require('compression')
 
app.use(compression()) // 一定要把这一行写在 静态资源托管之前
app.use(express.static('./dist'))
 
app.listen(80,()=> {
  console.log('server running at http://127.0.0.1')
})

It’s not a problem to run dist here and give it to the backend brother

4. Some optimizations can be made before executing the build

Set local services and built entry files in vue.confjg.js respectively

module.exports = {
  chainWebpack:config=>{
    //发布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      //entry找到默认的打包入口，调用clear则是删除默认的打包入口
      //add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')
 
      //使用externals设置排除项
      config.set('externals',{
        vue:'Vue',
        axios:'axios',
        lodash:'_',
        echarts:'echarts',
        nprogress:'NProgress',
      })
 
// 在项目的根目录创建一个vue.config.vue文件，添加上 chainWebpack，修改args里的参数配置，重新返回就可以  这里是 判断是开发版本 还是 发布版本
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
 
    })
    //开发模式
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')
 
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
 
  }
}

• main-dev.js The main entrance to the development version

• main-prod.js The main entrance to the release version is here to improve and delete unnecessary dependencies based on the development version. Item is changed to use cdn introduction, configuration routing lazy loading plug-in...

The above is the detailed content of How to solve the problem that after the vue3 project is packaged and published to the server, the access page displays blank. For more information, please follow other related articles on the PHP Chinese website!