vue 打包的问题空白

vue 路由分为hash(默认是hash)和history 

1.当时hash模式,当打包后是空白的,这是因为你的config文件下index.js文件,build对象下没有改成 assetsPublicPath: './',

2.当是history模式的时候,打包后放在ngnix下面,会有404的错误

    (1).404的解决方案

        在ngnix配置  config 下面index.js
        location / {
            root   html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        (2)嵌套子路由出现子路由

                 子路由不能正常显示
                 assetsPublicPath: '/',

 

### Vue 项目打包成 EXE 后出现空白页的原因分析 当 Vue 项目被打包成 EXE 文件后仍然遇到空白问题,通常是因为资源文件的路径配置不正确或缺少必要的依赖项。具体来说: - **静态资源路径错误**:在构建过程中未正确设置 `publicPath` 参数可能导致应用无法找到所需的 CSS 和 JavaScript 资源[^1]。 - **HTML 模板解析失败**:如果 HTML 文件中的模板标签未能被正确替换,则会使得最终渲染出来的页面为空白。 - **路由模式冲突**:采用 History 模式的路由可能会因为服务器端缺乏对应的重定向机制而失效,在桌面环境中表现为找不到指定 URL 下的内容[^3]。 ### 解决方案 #### 修改公共基础路径 (Public Path) 对于 Electron 或其他类似的桌面应用程序开发框架而言,建议将项目的 `publicPath` 设置为相对路径 `'./'` 来确保所有静态资源都能相对于入口 HTML 文档加载成功[^4]。 ```javascript // vue.config.js 中配置 publicPath module.exports = { publicPath: './', }; ``` #### 更改路由模式至 Hash Mode 为了避免因缺失服务端支持而导致的历史记录 API 失效问题,推荐切换到哈希(Hash)模式来定义客户端侧导航逻辑。这样即使是在离线状态下也能保持正常的浏览体验[^2]。 ```javascript const router = new Router({ mode: 'hash', // 使用 hash 模式代替 history }); ``` #### 确认 Webpack 输出配置无误 检查 webpack 构建工具链的相关选项是否合理,特别是针对不同环境变量所作出的不同处理方式。例如,在生产环境下应确保 assets 相关参数指向正确的子目录位置。 ```javascript output: { path: path.resolve(__dirname, '../dist'), filename: '[name].js', chunkFilename: '[id].[chunkhash].js' } ``` #### 测试与调试 完成上述更改之后重新编译整个工程,并利用浏览器开发者工具仔细审查控制台日志以及网络请求列表,确认不存在任何 404 错误或其他异常状况后再尝试导出为独立执行程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值