Bagaimana untuk menyelesaikan masalah bahawa selepas projek vue3 dibungkus dan diterbitkan ke pelayan, halaman akses dipaparkan kosong

Selepas projek vue3 dibungkus dan diterbitkan ke pelayan, halaman akses memaparkan kosong

1 Proses publicPath dalam vue.config.js fail

Pemprosesan adalah seperti berikut:

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. Proses fail index.js dalam folder penghala

seperti berikut: Gunakan bahagian yang diubah suai

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;

untuk menyelesaikan dua langkah di atas Menyelesaikan masalah paparan halaman kosong selepas projek vue3 dibungkus dan dikeluarkan ke pelayan

Masalah paparan halaman kosong semasa membungkus projek dan beberapa idea penyelesaian

Kami akan membungkusnya selepas pembangunan projek selesai

npm run build

Fail yang dijana oleh pakej akan berada dalam folder dist

Tetapi kadangkala halaman kosong akan muncul apabila membuka index.html

Seterusnya kita mulakan daripada Menganalisis dari beberapa aspek:

1 Laluan sumber keseluruhan semasa membungkus

Mengikut situasi sebenar, adalah perlu untuk menilai sama ada ia / atau ./

Konfigurasikan dalam vue-ui:

Konfigurasikan dalam 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 Mod penghalaan

Ya Hash atau mod sejarah

Mod cincang yang disyorkan mempunyai keserasian yang lebih tinggi #Laluan tidak akan dihantar ke pelayan pada masa hadapan untuk mengelakkan beberapa ralat

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

3 Sebab untuk beralih antara persekitaran pembangunan dan pengeluaran

Kerana apabila kita membangunkan persekitaran

npm run serve menyerupai pelayan tempatan <.>

dibungkus ke dalam folder dist, menyebabkan kandungan dalam beberapa perubahan seperti port tidak diminta, menyebabkan halaman kosong

Kami hanya boleh menggunakan pelayan tempatan dan membiarkan dist berjalan

Buat folder

• Inisialisasi npm dalam terminal folder npm init -y

• Pasang ekspres npm i express -S

• Salin dist ke folder baharu

• Buat app.js dan tulis kod

Dayakan gzip untuk mengecilkan saiz fail dan membuat pemindahan lebih cepat

• Pasang Pakej yang sepadan npm install compression -p

• Import pakej const mampatan = memerlukan('mampatan')

• Dayakan middleware app.use(compression( ))

Gunakan PM2 untuk mengurus aplikasi

• Pasang npm i pm2 -g

• Mulakan projek: pm2 start .app. js --nama tersuai

• Lihat projek yang sedang dijalankan pm2 ls

• Mulakan semula projek pm2 mulakan semula nama tersuai (ID)

• hentikan projek pm2 hentikan nama tersuai (ID)

• padam projek pm2 padam nama tersuai (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')
})

Tidak menjadi masalah untuk menjalankan dist di sini dan memberikannya kepada saudara bahagian belakang

Empat pengoptimuman boleh dibuat sebelum melaksanakan binaan

Tetapkan perkhidmatan tempatan dan fail masukan terbina dalam vue.confjg.js masing-masing

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
      })
    })
 
  }
}

• Pintu masuk utama versi pembangunan main-dev.js

• Pintu masuk utama versi keluaran ada di sini berdasarkan penambahbaikan versi pembangunan, padamkan kebergantungan yang tidak perlu dan gunakan cdn untuk memperkenalkan dan mengkonfigurasi penghalaan pemalam pemuatan malas.... ..main-prod.js

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah bahawa selepas projek vue3 dibungkus dan diterbitkan ke pelayan, halaman akses dipaparkan kosong. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!