問題の説明:

Vue3 + Ts を使用してプロジェクト開発と Vite 経由でのビルドとパッケージングを行った後、ローカルファイルシステムでパッケージ化してアクセスした後、dist ディレクトリにある index.html ファイルを直接開くと、ブラウザページが空白になり、コンソールを開いた後、エラーが報告され、対応するファイルがこのパスに見つかりません。

理由 1:

index.html ファイルで、参照された関連リソースファイルのパスが正しくないため、ファイルリソースの読み込みに失敗します。これは、ほとんどの開発プロセスで、この静的リソース参照のデフォルトの読み込みプレフィックスが「/」であるためです。
ここに画像の説明を挿入

解決：

プロジェクトのルートディレクトリにある vite.config.ts ファイルを開き、そのようなファイルがない場合は、手動で作成し (実際には、Vue2.x の vue.config.js に似ています)、静的リソースベースパスを設定します。「base」項目に：ヌル文字：「」、または：「./」、または process.env.NODE_ENV 変数による環境条件判定を設定するか、[ロードしたファイルの開始パスをカレントに設定（およびindex.html) 同レベル) パス].

注: プロジェクトがドメイン名の下のサブディレクトリにある場合、base アイテムの値は、対応するサブディレクトリのディレクトリ名です! !
例: プロジェクトはドメイン名の下の h5 ディレクトリにあり、ベースは「/h5/」です。

import {
    
     defineConfig } from 'vite'
import {
    
     resolve } from 'path'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    
    
  plugins: [
    vue(),
  ],

  // 静态资源基础路径 base: './' || '',
  base: process.env.NODE_ENV === 'production' ? './' : '/',

  alias: {
    
    
    // 配置目录别名
    '@': resolve(__dirname, 'src'),
    'views': resolve(__dirname, 'src/views'),
    'utils': resolve(__dirname, 'src/utils'),
  },

  css: {
    
    
    // css预处理器
    preprocessorOptions: {
    
    
      less: {
    
    
        modifyVars: {
    
    
          // 全局less变量存储路径(配置less的全局变量)
          hack: `true; @import (reference) "${
      
      resolve('src/public/config.less')}";`,
        },
        javascriptEnabled: true,
      }
    }
  },

  // 开发服务器配置
  server: {
    
    
    host: true,
    open: true,
    port: 3000,
    proxy: {
    
    
      '/api': {
    
    
        target: '//www.xxxx.com',
        changeOrigin: true,
        ws: true,
        secure: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  },
})

理由 2:

Vite は従来のモジュールシステム用に設計されていないため、デフォルトの出力<script type=module>はファイル (js モジュール、css ファイルなど) をロードしてアクセスするための type="module" の ES モジュールです。
次に例を示します。

  <script type="module">
  	 // 在type="module"模式下，可以在Web开发时直接以ES6+的模块化的方式来导入js资源模块。
  	 	// 引入本地js资源模块方式
		import {
     
      createApp } from './script/vue.js';
	 	// 引入网络js资源模块方式 【注：Node.js中的引入是不支持这种网络请求哦！！】
		import {
     
      createApp } from 'https://www.xxx.com/vue.js';
		
		const app = createApp({
     
     ...});
  </script>

ただし、上記の type="module" 形式の JS コードは、ブラウザ内のファイルシステムの形式でアクセスして実行することはできません。!
ここに画像の説明を挿入

解決：

<script type="module" crossorigin="" src="./assets/xxx..js"></script>ほとんどのブラウザーは type="module" メソッド、つまり ( ) を使用してブラウザーで js ファイルに直接アクセスすることをサポートしていないため、これは欠陥です。このモジュラーメソッドは、HTTP サーバー環境でアクセスする必要があります。プロジェクトをローカルで参照するには、HTTP サービス環境を構築することもできます。
いくつかのサードパーティツールを使用して、サービス環境をすばやく構築できます。一般的な HTTP サービスツールは次のとおりです。

ソフトウェアクラス:

WampServer ダウンロードアドレス：https ://www.wampserver.com
XAMPP ダウンロードアドレス: https://www.apachefriends.org/download.html
PhpStudy ダウンロードアドレス: https://www.xp.cn/

ブラウザアプリケーション (プラグイン) クラス:

WebServerforChrome ダウンロードアドレス: https://www.gugeapps.net/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

コマンドラインツールクラス:

live-server // ダウンロードアドレス: https://www.npmjs.com/package/live-server
http-server // ダウンロードアドレス: https://www.npmjs.com/package/http-server

上記のツールのいずれもインストールしていない場合は、コマンドラインツールでコマンドを実行するだけで、インストールして使用するのに非常に便利な live-server または http-server をここで使用することをお勧めします。

/**
* 以下服务工具二选一即可！！
*/

// 全局安装live-server
npm install -g live-server

// 全局安装http-server
npm install -g http-server

// 启动HTTP服务:
	1、在打包生成后的dist目录下，打开命令行工具
	2、执行如下命令：
	
		live-server // 启动HTTP服务
	或
		http-server // 启动HTTP服务

拡大：