一.vite.config.ts配置：主要的就是base: env.VITE_MODE === 'production' ? './' : '/',

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue';
import path from "path";
import { resolve } from 'path'
const port = 8080;
const host = "0.0.0.0";
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname)
  return {
    plugins: [
      vue(),
    ],
    base: env.VITE_MODE === 'production' ? './' : '/',
    resolve: {
      alias: {
        //resolve.alias設(shè)置別稱 解決@絕對路徑引入問題
        "@": path.resolve(__dirname, 'src'),
        "@assets": path.resolve(__dirname, "src/assets"),
        "@components": path.resolve(__dirname, "src/components"),
        "@images": path.resolve(__dirname, "src/assets/images"),
        "@views": path.resolve(__dirname, "src/views"),
        "@store": path.resolve(__dirname, "src/store"),
      },
    },
    css: {
      // css預(yù)處理器
      preprocessorOptions: {
        less: {
          modifyVars: {
            // 全局less變量存儲(chǔ)路徑(配置less的全局變量)
            hack: `true; @import (reference) "${resolve('src/public/config.less')}";`,
          },
          javascriptEnabled: true,
        }
      }
    },
    build: {
      outDir: "dist",
      assetsDir: "assets", //指定靜態(tài)資源存放路徑
      sourcemap: false, //是否構(gòu)建source map 文件
      // terserOptions: {
      //   // 生產(chǎn)環(huán)境移除console
      //   compress: {
      //     drop_console: true,
      //     drop_debugger: true,
      //   },
      // },
    },
    server: {
      https: false, // 是否開啟 https
      open: true, // 是否自動(dòng)在瀏覽器打開
      port: port, // 端口號(hào)
      host: host,
      proxy: {
        "/api": {
          target: env.VITE_RES_URL, // 后臺(tái)接口
          changeOrigin: true,
          secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
          ws: true, //websocket支持
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  }
})

二. 打包后的結(jié)果如圖所示，文件路徑是./ 其實(shí) 去掉./也是可以的，但是打包后是/favicon.ico這種路徑是訪問不到的，參考第一部分

三. 配置路由：路由改成?createWebHashHistory?

?四. vscode安裝Live Server?

?

關(guān)于vite build后訪問報(bào)錯(cuò)：Expected a JavaScript module script but the server responded with a MIME type of “

部署到線上時(shí)，頁面一刷新就會(huì)報(bào)上述錯(cuò)誤，百度了半天也沒解決，參考了這個(gè)大佬的文章，寫的很詳細(xì)，跟著步驟做也是可以解決報(bào)錯(cuò)的！

下面說一下我的解決方式 :

?1. base 設(shè)置成 './'? ?

?2. 路由模式改成 createWebHashHistory即可

?Tips：參考了好多大佬寫的，有的把base './'? 改成 '/'的 不過我改成 '/' 資源路徑不對還是白屏，跟著配置一圈沒解決，無意中把路由模式 createWebHistory 改成?createWebHashHistory 就解決了問題！白屏也跟Nginx有關(guān)。歡迎各位大佬批評指正與補(bǔ)充！文章來源地址http://www.zghlxwxcb.cn/news/detail-665802.html

到了這里，關(guān)于Vite + Vue3 + Ts 解決打包生成的index.html頁面顯示空白、資源跨域、找不到資源、404-Page Not Found等錯(cuò)誤；關(guān)于vite build后訪問報(bào)錯(cuò) 關(guān)于vite build后訪問報(bào)錯(cuò)：Expected a JavaScript module script but the server responded with a MIME type of “的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！