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中ref引用操作DOM元素的实现

    vue中ref引用操作DOM元素的实现

    本文主要介绍了vue中ref引用操作DOM元素的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • vue中的rules表单校验规则使用方法示例详解 :rules=“rules“

    vue中的rules表单校验规则使用方法示例详解 :rules=“rules“

    这篇文章主要介绍了vue中的rules表单校验规则使用方法示例详解 :rules=“rules“,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • Vue.js第一天学习笔记(数据的双向绑定、常用指令)

    Vue.js第一天学习笔记(数据的双向绑定、常用指令)

    这篇文章主要为大家分享了Vue.js第一天的学习笔记,包括数据的双向绑定、常用指令学习,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Vue实现双向数据绑定

    Vue实现双向数据绑定

    这篇文章主要为大家详细介绍了Vue实现双向数据绑定的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue-cli 打包后提交到线上出现

    vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报

    这篇文章主要介绍了vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案

    vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案

    这篇文章主要介绍了vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 前端不用跑项目vscode组件效果所见即所得

    前端不用跑项目vscode组件效果所见即所得

    这篇文章主要为大家介绍了一款不用跑项目的vscode组件所见即所得效果的使用方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • Vue.js移动端左滑删除组件的实现代码

    Vue.js移动端左滑删除组件的实现代码

    本篇文章主要介绍了Vue.js移动端左滑删除组件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • v-show和v-if的区别 及应用场景

    v-show和v-if的区别 及应用场景

    这篇文章主要介绍了v-show和v-if的区别及应用场景,vue中v-show与 v-if的作用效果是相同的,都能控制元素在页面是否显示,但是也有一定的区别,下面文章梳理总结v-show和v-if的区别,需要的小伙伴可以参考一下
    2022-06-06
  • vue实现面包屑的方法

    vue实现面包屑的方法

    这篇文章主要为大家详细介绍了vue实现面包屑的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论