vue项目打包后网页的title乱码解决方案

 更新时间:2024年03月21日 09:18:20   作者:爱学习的大雄  
这篇文章主要介绍了vue项目打包后网页的title乱码解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue项目打包后网页的title乱码

遇到的问题

vue项目在本地运行时无乱码现象产生,但在我运行npm run build打包项目运行index.html后发现就是这个标题会出现乱码的情况

后来在经过查阅资料,发现是字符编码的问题。

尝试了网上一种方法

就是将乱码的文件使用电脑自带的记事本打开,然后选择utf-8字符编码另存为。

这种方法可以在本机上实现问题的解决,但是当我把另存为的文件再次上传到linux服务器中部署后有产生了乱码问题

最终找到的解决方法

如下:

在产生乱码的html的head中添加以下代码即可:

<meta http-equiv=Content-Type content="text/html; charset=utf-8">

添加后再次进行项目打包,本地测试无乱码现象,然后上传至linux服务器部署,访问测试,无乱码现象。

vue部署项目,线上打开乱码

如图:

在 index.html <head></head>中加入<meta charset="utf-8"> 即可

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中引入mxGraph的步骤详解

    vue中引入mxGraph的步骤详解

    本文分步骤给大家介绍了vue中引入mxGraph的方法,非常不错,给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 深入了解Vue之组件的生命周期流程

    深入了解Vue之组件的生命周期流程

    每个Vue实例在创建时都要经过一系列初始化, 例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等,同时, 也会运行一些叫作生命周期钩子的函数,接下来让我们一起来探索Vue实例被创建时都经历了什么,感兴趣的同学跟着小编一起来探讨吧
    2023-05-05
  • 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

    解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

    这篇文章主要介绍了解决mpvue + vuex 开发微信小程序 vuex辅助函数mapState、mapGetters不可用问题,需要的朋友可以参考下
    2018-08-08
  • vue中使用echarts绘制双Y轴图表时刻度没有对齐的两种解决方法(最新方案)

    vue中使用echarts绘制双Y轴图表时刻度没有对齐的两种解决方法(最新方案)

    这篇文章主要介绍了vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法,主要原因是因为刻度在显示时,分割段数不一样,导致左右的刻度线不一致,不能重合在一起,下面给大家分享解决方法,需要的朋友可以参考下
    2024-03-03
  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    这篇文章主要为大家详细介绍了Vue.js组件tab实现选项卡切换的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程

    基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程

    这篇文章主要介绍了基于Vue3实现一个前端埋点上报插件并打包发布到npm,本项目采用pnpm进行Monorepo环境搭建,因为未来这个项目可能会加入更多的工具包,需要的朋友可以参考下
    2022-10-10
  • vue实现路由鉴权和不同用户登录

    vue实现路由鉴权和不同用户登录

    这篇文章主要为大家详细介绍了vue中实现路由鉴权和不同用户登录的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • vue 源码解析之虚拟Dom-render

    vue 源码解析之虚拟Dom-render

    这篇文章主要介绍了vue 源码解析 --虚拟Dom-render的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue利用openlayers加载天地图和高德地图

    vue利用openlayers加载天地图和高德地图

    这篇文章主要介绍了 vue利用openlayers加载天地图和高德地图,下文章主要由两部分完成openlayers加载天地图和加载高德地图,下面来看看详细内容吧,需要的朋友可以参考一下,希望对大家有所帮助
    2021-11-11
  • vue组件实现文字居中对齐的方法

    vue组件实现文字居中对齐的方法

    这篇文章主要为大家详细介绍了vue组件实现文字居中对齐的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论