网页title自定义标签

package.json

@@ -60,7 +60,7 @@
     "vue-cookies": "^1.8.2",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
-    "vue-meta": "2.4.0",
+    "vue-meta-info": "^0.1.7",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"

public/index.html

@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <link href="./SuperMap3D/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
-  <title><%= webpackConfig.name %></title>
+  <!--<title><%= webpackConfig.name %></title>-->
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,

src/App.vue

@@ -1,12 +1,33 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <script>
-export default {
-  name: 'App',
-}
+  export default  {
+    name:  'App',
+    metaInfo () {
+      return {
+        title:this.title,
+        meta:[{
+          charset: "utf-8"
+        },
+          {
+            name: "viewport",
+            content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+          }]
+      }
+    },
+    data() {
+      return {
+        title:"",
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.title = '四平市态势感知平台'
+      }, 1000)
+    },
+  }
 </script>
-

src/main.js

@@ -30,11 +30,14 @@ import './permission' // permission control
 //DataV动效组件
 import dataV from '@jiaminghi/data-view'
 
+// 头部标签组件
+import MetaInfo from 'vue-meta-info';
+
 //全局混入 mixin
 import {mixinMapTip} from './mixin'
 Vue.mixin(mixinMapTip);
 
-//公共过滤器 
+//公共过滤器
 import './filters'
 // //WebSocket封装方法
 // import * as socketApi from '@/api/socket'
@@ -50,10 +53,12 @@ Vue.use(VueCookies)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(dataV)
+Vue.use(MetaInfo)
 Vue.component('ImageUpload', ImageUpload)
 Vue.prototype.$echarts = echarts //挂载echarts
 DictData.install()
 
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

vue.config.js

@@ -7,8 +7,8 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-// const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
-const name = '四平市态势感知平台' // 网页标题
+const name = process.env.VUE_APP_TITLE || '四平市态势感知平台' // 网页标题
+// const name = '四平市态势感知平台' // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口