Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、资源跨域、找不到资源、404-Page Not Found等错误;关于vite build后访问报错
关于Vite打包后本地访问打包文件空白页面 ;关于vite build后访问报错:Expected a JavaScript module script but the server responded with a MIME type of “
·
一.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设置别称 解决@绝对路径引入问题
"@": 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预处理器
preprocessorOptions: {
less: {
modifyVars: {
// 全局less变量存储路径(配置less的全局变量)
hack: `true; @import (reference) "${resolve('src/public/config.less')}";`,
},
javascriptEnabled: true,
}
}
},
build: {
outDir: "dist",
assetsDir: "assets", //指定静态资源存放路径
sourcemap: false, //是否构建source map 文件
// terserOptions: {
// // 生产环境移除console
// compress: {
// drop_console: true,
// drop_debugger: true,
// },
// },
},
server: {
https: false, // 是否开启 https
open: true, // 是否自动在浏览器打开
port: port, // 端口号
host: host,
proxy: {
"/api": {
target: env.VITE_RES_URL, // 后台接口
changeOrigin: true,
secure: false, // 如果是https接口,需要配置这个参数
ws: true, //websocket支持
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
}
})
二. 打包后的结果如图所示,文件路径是./ 其实 去掉./也是可以的,但是打包后是/favicon.ico这种路径是访问不到的,参考第一部分
三. 配置路由:路由改成 createWebHashHistory
四. vscode安装Live Server
关于vite build后访问报错:Expected a JavaScript module script but the server responded with a MIME type of “
部署到线上时,页面一刷新就会报上述错误,百度了半天也没解决,参考了这个大佬的文章,写的很详细,跟着步骤做也是可以解决报错的!
下面说一下我的解决方式 :
1. base 设置成 './'
2. 路由模式改成 createWebHashHistory即可
Tips:参考了好多大佬写的,有的把base './' 改成 '/'的 不过我改成 '/' 资源路径不对还是白屏,跟着配置一圈没解决,无意中把路由模式 createWebHistory 改成 createWebHashHistory 就解决了问题!白屏也跟Nginx有关。欢迎各位大佬批评指正与补充!
更多推荐
已为社区贡献2条内容
所有评论(0)