本文已参与[新人创作礼]活动，一起开启掘金创作之路
vue 全局动态修改title、keywords、description
路由：
{
path: "xxx",
name: "xxx",
component: () =>import('..xxx'),
meta: {
title: 'xxx',
keywords:'xxx',
description:'xxx'
},
},
实现
router.beforeEach((to,from,next)=>{
/*********动态修改keywords和description*************/
if(Object.keys(to.meta).length>0 && to.matched.length>0){
let this_meta=to.matched[to.matched.length-1].meta
console.log(this_meta,'---this_meta---')
if(this_meta.title)document.title=this_meta.title
let head = document.getElementsByTagName('head');
let meta_keyword=document.createElement('meta');
if(document.querySelector('meta[name="keywords"]')){
document.querySelector('meta[name="keywords"]').setAttribute('content',this_meta.keywords)
}else{
meta_keyword.setAttribute('name','keywords')
meta_keyword.setAttribute('content',this_meta.keywords)
head[0].appendChild(meta_keyword)
}
let meta_description=document.createElement('meta');
if(document.querySelector('meta[name="description"]')){
document.querySelector('meta[name="description"]').setAttribute('content',this_meta.description)
}else{
meta_description.setAttribute('name','description')
meta_description.setAttribute('content',this_meta.description)
head[0].appendChild(meta_description)
}
}
/**********************************************/
next()
})
cdn引入第三方依赖
第一步
index.html中：
//最好放到head里面
<head>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入js -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<!-- 使用vueX的方法-->
<!-- 定义后页面不需要 import { mapState } from 'vuex'，直接使用 mapState-->
<script>
var mapState=Vuex.mapState
var mapGetters=Vuex.mapGetters
</script>
</head>
第二步：
webpack.base.conf.js 或者 vue.config.js
webpack.base.conf.js:
module.exports={
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
},
}
vue.config.js:
module.exports = {
configureWebpack:{
externals: {
//包名 ： 全局变量
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
}
}
};
第三步：
// import Vue from "vue";
// import { mapState,mapGetters } from 'vuex'
// import vueRouter from 'vue-router'
// import Vuex from 'vuex'
//都需要注释掉
//但是：
Vue.use(Vuex)
Vue.use(VueRouter)
//等还是需要使用
//如果使用了 ElementUI，Vue.use(ElementUI) 也不需要了，不然还是会打包进入vendor.js
快捷查找依赖的cdn地址：cdn地址
# vue打包时，将打包文件放到上级目录
关键是通过修改输出位置
outputDir实现的,当然必须要加上 no-clean,不然打包会把之前的文件删除
目录结构：
vue.config.js：
module.exports = {
publicPath: './',
lintOnSave:false,
outputDir: '../../parent',//打包文件
assetsDir:'static',//静态资源
}
package.json：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --no-clean",
"lint": "vue-cli-service lint"
},
//关键：--no-clean
打包后：
