vue3 プロジェクトをパッケージ化してサーバーに公開した後、アクセス ページが空白で表示される問題の解決方法

vue3 プロジェクトがパッケージ化され、サーバーに公開されると、アクセス ページに空白が表示されます

1. vue.config.js の publicPath を処理します。 file

処理は以下の通りです:

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. ルータフォルダ内のindex.jsファイルを処理します

処理は以下の通りです: 修正部分を使用します

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;

vue3 プロジェクトをパッケージ化してサーバーにリリースした後、アクセス ページに空白のページが表示される問題を解決する #

npm run build

パッケージ化時に空白のページが表示される問題を解決プロジェクトといくつかのソリューションのアイデア

プロジェクトの開発が完了したらパッケージ化します

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

パッケージ化によって生成されたファイルは dist フォルダーにあります

ただし、空白の場合もありますIndex.html

#次に、いくつかの側面から分析を開始します:

1.

# をパッケージ化するときの全体的なリソース パス## 実際の状況に応じて、/ であるか ./ であるかを判断する必要があります

vue-ui での設定:

##vue.config.js で設定します:

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

2. ルーティング モード

Yes ハッシュ モードまたはヒストリカル モード

推奨されるハッシュ モードの方が互換性が高くなります# パスエラーを避けるため、今後はサーバーには送信されません

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

3. 開発環境と運用環境を切り替える理由

環境を開発するときの理由

npm runserve はローカルサーバーをシミュレートします。

これを dist フォルダーにパッケージ化すると、ポートなどの一部の変更の内容が要求されず、空白のページが表示されます。

ローカルサーバーを単純にデプロイできます。サーバーに接続して dist を実行します。

フォルダーを作成します。

フォルダーで npm を初期化します。ターミナル npm init -y

• express npm iexpress をインストールします -S

• dist を新しいフォルダーにコピーします

• app.js を作成してコードを作成します
gzip を有効にしてファイル サイズを削減し、転送を高速化します。

インストールに対応するパッケージ npm install crash -p

• パッケージのインポート const Compression = require('compression')

• ミドルウェア app.use(compression( ))
• # を有効にする
  ##PM2 管理アプリケーションを使用する

npm i pm2 -g

• プロジェクトを開始します: pm2 start .\app.js --カスタム名

• 実行中のプロジェクト pm2 の表示 ls

• プロジェクト pm2 の再起動カスタム名 (ID)

• プロジェクト pm2 の停止 カスタム名 (ID) の停止

• プロジェクト pm2 の削除 カスタム名 (ID) の削除

app.js：

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

ここで dist を実行してバックエンド ブラザーに渡すのは問題ありません

4. いくつかの最適化は、事前に行うことができます。ビルドの実行

vue.confjg.js にローカル サービスとビルドされたエントリ ファイルをそれぞれ設定します

rrreee

main-dev.js

メインの入り口開発版への

• main-prod.js
リリース版へのメインの入り口は、開発版に基づいて不要な依存関係を改善および削除するためにここにあります。 cdn の導入、設定ルーティング遅延読み込みプラグインを使用するように変更されました...

以上がvue3 プロジェクトをパッケージ化してサーバーに公開した後、アクセス ページが空白で表示される問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。