vue3项目打包时We're sorry but XXX doesn't work properly without JavaScript

题引：

这周末公司突然分配了一个任务，让我搞一个混合代码的平板项目：vue3+安卓原生 来配合实现。看了一眼，问题不大，那边只要求把做好的页面打包成 dist 文件发给组长即可。开干。

正文：

当界面做完之后且打包完成，就打开了 dist 文件夹里的 index.html 。突然发现页面是空白的，打开调试器之后突然发现了一个报错：

<strong>We’re sorry but XXX doesn’t work properly without JavaScript enabled</strong>

看了一下vue-router、pinia没有什么问题，调用顺序也没错。于是就往打包的文件夹查看，才发现了引用的路径是以 / 绝对路径开头的，以至于资源无法加载而导致页面空白。

发现了这个问题，直接定位到 vue.config.js 文件，如果是vite创建的话应该是 vite.config.js

//vue.config.js

export default = {

    publicPath: './',  //打包文件的路径

    ... // 其他配置

}



//vite.config.js

import {defineConfig} from 'vite';

import vue from '@vitejs/plugin-vue';

export default defineConfig({

    publicPath: './',  //打包文件的路径

    ...

})

当然，上网查了一下前端的路由也会导致这个问题的出现。可以把mode值从 history 改成 hash 。

import {createRouter,createWebHashHistory} from 'vue-router';



const routes = [];

const router = createRouter({

    router,

    history:createWebHashHistory()

})

结尾：

以上就是处理打包上线时遇到 项目在没有启用JavaScript的情况下无法正常工作 的情况。