在src目录下设置配置变量
module.exports = {
title: '我是标题',
fixedHeader : true
}
使用一:在.vue文件中使用
引入
impot defaultSettings from '@/settings'
const {title} = defaultSettings
export default {
name: 'SidebarLogo',
data() {
return {
title: title
}
}
}
使用二:在.js文件中使用 【vue.config.js】
const defaultSettings = require('./src/settings.js')
const name = defaultSettings.title || 'vue Admin Template'
module.exports = {
configureWebpack: {
name: name, // 在这里赋值
resolve: {
alias: {
'@': resolve('src')
}
}
},
}
使用:在index.html中调用这个name值
<title><%= webpackConfig.name %></title>
即为网页标签名

使用三:在状态管理器store - setting.js文件中使用
import defaultSettings from '@/settings'
const { fixedHeader } = defaultSettings
const state = {
fixedHeader : fixedHeader
}
const mutations = {
CHANGE_SETTING: (state, { key, value }) => {
if (state.hasOwnProperty(key)) {
state[key] = value
}
}
}
const actions = {
changeSetting({ commit }, data) {
commit('CHANGE_SETTING', data)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
在store-index.js中
import settings from './modules/settings'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
settings
},
getters
})
export default store
在.vue中调用
computed:{
fixedHeader() {
return this.$store.state.settings.fixedHeader
}
}
网友评论