文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

解决vue3项目打包发布到服务器后访问页面显示空白问题

2023-03-19 17:43

关注

vue3项目打包发布到服务器后访问页面显示空白

1、处理vue.config.js文件中的publicPath

处理如下:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    outputDir: 'dist',
    indexPath: 'index.html',
    lintOnSave: false,
    transpileDependencies: true,
})

2、处理router文件夹中的index.js文件

处理如下:采用修改后的部分

import { createRouter, createWebHistory, createWebHashHistory  } from 'vue-router';
import routes from "./routes";

const router = createRouter({
    //history: createWebHistory(process.env.BASE_URL),//默认时
    history: createWebHashHistory(process.env.BASE_URL),//修改后
    routes
})
export default router;

解决以上这两步,就解决vue3项目打包发布到服务器后访问页面显示空白问题

在打包项目时显示空白页问题和一些解决思路

在项目开发完毕后我们就会进行打包

npm run build

打包生成的文件会在dist文件夹中

但有时候打开index.html 会出现空白页面

接下来我们从几个方面来进行分析:

一、打包时整体资源路径

根据实际情况要判断    是/   还是 ./ 

在vue-ui 里配置:

在vue.config.js里配置:

module.exports = {
//基本路径 文件打包后放的位置
publicPath:‘./',
 
//默认输出文件夹为dist,填入的名字为打包后的文件名
outputDir:‘name',
 
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。资源放的目录
assetsDir: “./static”,
 
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 index的路劲和名字
indexPath: ‘./index.html',
 
//打包后是否生成map文件,map文件能看到错误代码位置,设置为false不生成map文件,打包体积缩小
productionSourceMap: false,
}

二、路由模式

是哈希 还是 历史模式 

推荐 哈希模式 兼容性更高 #以后路径不会发送给服务器 避免一些错误

const router = new VueRouter({
  routes,
  mode:'hash',
})

三、开发和生产环境切换的原因

因为我们开发环境时

npm run serve 模拟的是本地服务器

打包成dist文件夹 导致端口等一些变化 当中的内容请求不过来 所以导致空白页

我们可以简单部署本地服务器让 dist 跑起来

创建文件夹

开启gzip 减小文件体积 使传输速度更快

使用PM2 管理应用

app.js:

const express = require('express')
const app = express()
 
const compression = require('compression')
 
app.use(compression()) // 一定要把这一行写在 静态资源托管之前
app.use(express.static('./dist'))
 
app.listen(80,()=> {
  console.log('server running at http://127.0.0.1')
})

在这里能跑起来 dist 给后端大哥也不成问题了

四、执行构建之前可以进行一些优化

在 vue.confjg.js 中分别设置 本地服务 和 构建 的入口文件

module.exports = {
  chainWebpack:config=>{
    //发布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      //entry找到默认的打包入口,调用clear则是删除默认的打包入口
      //add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')
 
      //使用externals设置排除项
      config.set('externals',{
        vue:'Vue',
        axios:'axios',
        lodash:'_',
        echarts:'echarts',
        nprogress:'NProgress',
      })
 
// 在项目的根目录创建一个vue.config.vue文件,添加上 chainWebpack,修改args里的参数配置,重新返回就可以  这里是 判断是开发版本 还是 发布版本
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
 
    })
    //开发模式
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')
 
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
 
  }
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-服务器
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯