Problem Description:

After using Vue3 + Ts for project development and building and packaging through Vite, when you directly open the index.html file in the dist directory after packaging and access in the local file system, the browser page is blank. , After opening the console, an error is reported, and the corresponding file cannot be found in this path.

Reason 1:

In the index.html file, the path of the referenced related resource file is incorrect, which causes the failure to load the file resource, because in most development processes, the default loading prefix for this static resource reference is "/".
insert image description here

Solution:

Open the vite.config.ts file in the project root directory. If there is no such file, create one manually (in fact, it is similar to vue.config.js in Vue2.x), and set the static resource base path "base" item to: Null character: " ", or: "./", or set the environment condition judgment according to the process.env.NODE_ENV variable, [also set the starting path of the loaded file to the current (and index.html) same level) path].

Note: If the project is in a subdirectory under the domain name, the value of the base item is: the directory name of the corresponding subdirectory! !
For example: the project is in the h5 directory under the domain name, then base: '/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/, ''),
      }
    }
  },
})

Reason 2:

Since Vite is not designed for the traditional module system, the default output <script type=module>is ES Modules with type="module" to load and access files (js modules, css files, etc.),
for example:

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

However, the above type="module" modular form of JS code is not allowed to access and run in the form of a file system in the browser! !
insert image description here

Solution:

This is a flaw, because most browsers do not support <script type="module" crossorigin="" src="./assets/xxx..js"></script>accessing js files directly in the browser with the type="module" method, that is ( ), this modular method needs to be accessed in the HTTP server environment. , so if you want to browse the project locally, you can also build an HTTP service environment.
You can quickly build a service environment with the help of some third-party tools. Common HTTP service tools are as follows:

Software class:

WampServer download address: https://www.wampserver.com
XAMPP download address: https://www.apachefriends.org/download.html
PhpStudy download address: https://www.xp.cn/

Browser application (plug-in) class:

WebServerforChrome download address: https://www.gugeapps.net/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

Command line tool class:

live-server // Download address: https://www.npmjs.com/package/live-server
http-server // Download address: https://www.npmjs.com/package/http-server

If you have not installed any of the above tools, live-server or http-server are recommended here, because they are very convenient to install and use. You only need to execute the command in the command line tool.

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

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

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

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

Extension: