Web Front-end
Vue.js
How to solve the problem that after the vue3 project is packaged and published to the server, the access page displays blank
How to solve the problem that after the vue3 project is packaged and published to the server, the access page displays blank
May 17, 2023 am 08:19 AM
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),//默認(rèn)時(shí)
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:
module.exports = {
//基本路徑 文件打包后放的位置
publicPath:‘./'，
//默認(rèn)輸出文件夾為dist，填入的名字為打包后的文件名
outputDir:‘name',
// 放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄。資源放的目錄
assetsDir: “./static”,
// 指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑 index的路勁和名字
indexPath: ‘./index.html',
//打包后是否生成map文件，map文件能看到錯(cuò)誤代碼位置，設(shè)置為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 errorsconst router = new VueRouter({
routes,
mode:'hash',
}) 3. Reasons for switching between development and production environmentsBecause when we develop the environmentnpm run serve simulates the local serverPackaging it into a dist folder causes the content in some changes such as the port to not be requested, resulting in a blank pageWe 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 )
const express = require('express')
const app = express()
const compression = require('compression')
app.use(compression()) // 一定要把這一行寫(xiě)在 靜態(tài)資源托管之前
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 brother4. 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=>{
//發(fā)布模式
config.when(process.env.NODE_ENV === 'production',config=>{
//entry找到默認(rèn)的打包入口，調(diào)用clear則是刪除默認(rèn)的打包入口
//add添加新的打包入口
config.entry('app').clear().add('./src/main-prod.js')
//使用externals設(shè)置排除項(xiàng)
config.set('externals',{
vue:'Vue',
axios:'axios',
lodash:'_',
echarts:'echarts',
nprogress:'NProgress',
})
// 在項(xiàng)目的根目錄創(chuàng)建一個(gè)vue.config.vue文件，添加上 chainWebpack，修改args里的參數(shù)配置，重新返回就可以 這里是 判斷是開(kāi)發(fā)版本 還是 發(fā)布版本
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
//開(kāi)發(fā)模式
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 versionmain-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!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to solve the problem that eMule search cannot connect to the server
Jan 25, 2024 pm 02:45 PM
Solution: 1. Check the eMule settings to make sure you have entered the correct server address and port number; 2. Check the network connection, make sure the computer is connected to the Internet, and reset the router; 3. Check whether the server is online. If your settings are If there is no problem with the network connection, you need to check whether the server is online; 4. Update the eMule version, visit the eMule official website, and download the latest version of the eMule software; 5. Seek help.
Solution to the inability to connect to the RPC server and the inability to enter the desktop
Feb 18, 2024 am 10:34 AM
What should I do if the RPC server is unavailable and cannot be accessed on the desktop? In recent years, computers and the Internet have penetrated into every corner of our lives. As a technology for centralized computing and resource sharing, Remote Procedure Call (RPC) plays a vital role in network communication. However, sometimes we may encounter a situation where the RPC server is unavailable, resulting in the inability to enter the desktop. This article will describe some of the possible causes of this problem and provide solutions. First, we need to understand why the RPC server is unavailable. RPC server is a
How to configure Dnsmasq as a DHCP relay server
Mar 21, 2024 am 08:50 AM
The role of a DHCP relay is to forward received DHCP packets to another DHCP server on the network, even if the two servers are on different subnets. By using a DHCP relay, you can deploy a centralized DHCP server in the network center and use it to dynamically assign IP addresses to all network subnets/VLANs. Dnsmasq is a commonly used DNS and DHCP protocol server that can be configured as a DHCP relay server to help manage dynamic host configurations in the network. In this article, we will show you how to configure dnsmasq as a DHCP relay server. Content Topics: Network Topology Configuring Static IP Addresses on a DHCP Relay D on a Centralized DHCP Server
Detailed explanation of CentOS installation fuse and CentOS installation server
Feb 13, 2024 pm 08:40 PM
As a LINUX user, we often need to install various software and servers on CentOS. This article will introduce in detail how to install fuse and set up a server on CentOS to help you complete the related operations smoothly. CentOS installation fuseFuse is a user space file system framework that allows unprivileged users to access and operate the file system through a customized file system. Installing fuse on CentOS is very simple, just follow the following steps: 1. Open the terminal and Log in as root user. 2. Use the following command to install the fuse package: ```yuminstallfuse3. Confirm the prompts during the installation process and enter `y` to continue. 4. Installation completed
Best Practice Guide for Building IP Proxy Servers with PHP
Mar 11, 2024 am 08:36 AM
In network data transmission, IP proxy servers play an important role, helping users hide their real IP addresses, protect privacy, and improve access speeds. In this article, we will introduce the best practice guide on how to build an IP proxy server with PHP and provide specific code examples. What is an IP proxy server? An IP proxy server is an intermediate server located between the user and the target server. It acts as a transfer station between the user and the target server, forwarding the user's requests and responses. By using an IP proxy server
What should I do if I can't enter the game when the epic server is offline? Solution to why Epic cannot enter the game offline
Mar 13, 2024 pm 04:40 PM
What should I do if I can’t enter the game when the epic server is offline? This problem must have been encountered by many friends. When this prompt appears, the genuine game cannot be started. This problem is usually caused by interference from the network and security software. So how should it be solved? The editor of this issue will explain I would like to share the solution with you, I hope today’s software tutorial can help you solve the problem. What to do if the epic server cannot enter the game when it is offline: 1. It may be interfered by security software. Close the game platform and security software and then restart. 2. The second is that the network fluctuates too much. Try restarting the router to see if it works. If the conditions are OK, you can try to use the 5g mobile network to operate. 3. Then there may be more
What are the life cycles of vue3
Feb 01, 2024 pm 04:33 PM
vue3的生命周期：1、beforeCreate；2、created；3、beforeMount；4、mounted；5、beforeUpdate；6、updated；7、beforeDestroy；8、destroyed；9、activated；10、deactivated；11、errorCaptured；12、getDerivedStateFromProps等等
Equipped with AMD EPYC 4004 series processors, ASUS launches a variety of server and workstation products
Jul 23, 2024 pm 09:34 PM
According to news from this website on July 23, ASUS has launched a variety of server and workstation-level products powered by AMD EPYC 4004 series processors. Note from this site: AMD launched the AM5 platform and Zen4 architecture EPYC 4004 series processors in May, offering up to 16-core 3DV-Cache specifications. ASUSProER100AB6 server ASUSProER100AB6 is a 1U rack server product equipped with EPYC Xiaolong 4004 series processor, suitable for the needs of IDC and small and medium-sized enterprises. ASUSExpertCenterProET500AB6 workstation ASUSExpertCenterProET500AB6 is a
