1 说明
几个前端短时间内提桶跑路,没人写页面,准备自己写,第一步就遇到问题。
安装好环境,拉下代码,本地运行没什么问题
打包发布后,出现乱码(网站标题乱码,页面查询框默认提示文字乱码、分页乱码等等)
2 处理
最开始以为是环境问题,各种配置环境,变更软件版本,都没有效果。
瞎弄了两天,最后终于解决了
index.html配置utf-8
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
完整的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<title>杭州金色年华养老服务信息管理系统</title>
<body>
<noscript>
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
vue.config.js添加配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
chainWebpack: config => { config.plugin('html').tap(args => { args[0].meta = { charset: 'utf-8' }; return args; }); }, configureWebpack: { plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', meta: { charset: 'utf-8' } }) ] }
完整
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
publicPath: './',
assetsDir: 'static',
productionSourceMap: false,
// devServer: {
// proxy: {
// '/api':{
// target:'http://jsonplaceholder.typicode.com',
// changeOrigin:true,
// pathRewrite:{
// '/api':''
// }
// }
// }
// }
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].meta = { charset: 'utf-8' };
return args;
});
},
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
meta: { charset: 'utf-8' }
})
]
}
}
使用yarn打包