YDOOK：vue3.0: vue-cli4.5: 改變專案的網頁頁面 標籤標題title 更改網頁標籤的名稱TITLE 自定義TITLE
阿新 • • 發佈：2020-12-27
技術標籤：Webvuevue-cli4.5修改頁面TITLE自定義title自定義頁面TITLE
YDOOK：vue3.0: vue-cli4.5: 改變專案的網頁頁面 標籤標題title 更改網頁標籤的名稱TITLE 自定義TITLE
如果想修改 ICON 請參看博主的下面文章：
https://ydook.blog.csdn.net/article/details/111478827
1. 首先，我們不能從 ./public/index.html 檔案中修改：
因為該檔案為 index.html 的模板檔案，一般不在這裡修改，這裡的修改是 普遍性的 與 通用性的：
<!DOCTYPE html> 2. 由於 vue-cli4.5 沒有專門的外掛管理頁面的標籤 Title, 所以我們需要下載一個專門的 vue-cli 外掛用於管理：
該外掛的名稱就是：
vue-wechat-title
如果是初次使用，我們需要安裝：
npm install vue-wechat-title --save
如果是大陸內網速管制，可以通過 cnpm 進行安裝：
cnpm install vue-wechat-title --save
Note: 注意，該外掛應該安裝在具體的 vue-cli 專案的根目錄中：
cd [具體的 vue-cli 專案的根目錄]
cnpm install vue-wechat-title --save
or:
npm install vue-wechat-title --save
安裝成功後悔提示：
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 115ms(network 106ms), speed 9.77kB/s, json 1(1.04kB), tarball 0B)
3. 在成功安裝了 [vue-wechat-title ] 外掛後，我們還需要進行具體的專案引數配置，才能正常地使用該外掛進行 [Title] 的管理：
首先，我們要將 ./src/main.ts 檔案中，將其內容修改新增為以下內容：
import VueWechatTitle from 'vue-wechat-title' // 引入 VueWechatTitle包
import router from './router'
import App from './App.vue'
import { createApp } from 'vue'
import installElementPlus from './plugins/element'
const app = createApp(App)
installElementPlus(app)
app
.use(router)
.use(VueWechatTitle) // 使用 VueWechatTitle包
.mount('#app')
這裡主要修改的為下面兩行程式碼：
import VueWechatTitle from 'vue-wechat-title' // 引入 VueWechatTitle包
.use(VueWechatTitle) // 使用 VueWechatTitle包
4. 如果是初次引入，在 ./src/main.ts 檔案中引入 [VueWechatTitle包 ] 後，會提示類似：
Could not find a declaration file for module 'vue-wechat-title' ...
這類錯誤都是類似於下面的提示：
Could not find a declaration file for module 'vue-xxx' ...
這類錯誤都由於 vue-cli 框架在初次引入 vue-cli 的第三方安裝包造成的，解決的辦法如下：
1. 在 vue-cli 專案的根目錄下找到： ./src/shims-vue.d.ts 檔案：
2. 初始的改檔案的內容如下：
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
3. 然後，在程式碼的末尾新增一行：宣告 vue-cli 的第三方外掛即可，修改後的程式碼的內容如下：
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
declare module 'vue-wechat-title'
4. 在完成 ./src/shims-vue.d.ts 檔案 的配置後，就可以在 ./src/router/index.ts 檔案下進行 TITILE 的修改：
在對應的 router配置項 {} 內的內容進行修改：
新增 meta (變化之意) 配置，在 meta 配置項內，新增 titlle 配置：
注意：title 的配置內容需要使用單引號進行包括：
{
path: '/',
name: 'Home',
meta: {
title: 'YDOOK JYLin'
},
component: Home
},
5. 然後執行：
npm run serve
即可觀察到已經被修改 TITLE 後的頁面：
