项目下有.htaccess文件，里面配置了路由规则，如下：

<IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>

升级前访问域名（不带路径，比如http://yidianhulian.com）会正确进入系统。

但在升级后，访问域名却把项目里面的文件列出来了（Options All），并没有按规则进入index.php文件。

排查下来的原因是新版本apache，在访问域名（不带路径，比如http://yidianhulian.com）时RewriteCond %{REQUEST_FILENAME} !-d 这个条件是不成立的，导致没有进入RewriteRule，猜测新版本把只访问域名也当做对是对工作目录对直接访问了？

解决办法，针对只访问域名的情况再加上一个规则RewriteRule ^$ index.php [QSA,L]，变成如下：

<IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteRule ^$ index.php [QSA,L]
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>

近期，东北、华北、黄淮等地出现极端降雨，多地出现居民被困和人员伤亡情况，全国各地救援力量迅速集结，驰援防线救灾一线，全力投入防汛救灾工作。在当前全国齐心聚力、携手救灾的特殊时期，个别网民编造传播涉灾情虚假信息、挑动地域对立歧视，严重扰乱网上舆论秩序，干扰妨碍抗险救灾工作。为进一步净化网络环境，维护网络秩序，全力维护全国上下万众一心、全力救灾恢复、全力保障人民群众生命财产安全和社会大局稳定的网上主旋律，切实成为防汛救灾的参与者、助力者，现发出如下倡议:

一、自觉抵制违法有害信息网上传播
1、坚决抵制违法有害信息。不制造、不听信、不传播涉灾救灾违法有害和负面不良信息，不以讹传讹，不煽风点火，不随意传播无出处、无证据的举报、泄露隐私、个人攻击、不良言论等内容。
2、严管信息发布账号。强化对账号信息的人工审核和资质认证，严防假冒仿冒党政军机关、新闻媒体、地方政府和用户账号，严控不符合资质认证要求并从事专门领域信息内容生产的“自媒体”账号，严禁操纵“自媒体”账号矩阵发布传播涉灾救灾违法和负面不良信息
3、严管信息发布内容。用户发布新闻信息，要按照有关规定标注信息来源，自行拍摄信息，要逐一标注拍摄时间地点;使用技术生成信息，要打上技术生成标签;引用旧闻旧事的，要说明事发时间地点; 发布含有虚构演绎内容信息，要加注虚构演绎标签; 平台对存疑或谣言信息，将标记争议谣言标签，并按规定采取限流、辟谣、禁言等处置措施。

二、坚持对违法有害信息“零容忍”
4、增强网络文明意识。树立正确的网络道德观，主动抵制和举报各种网上违法犯罪和低俗不良行为，坚决同网络违法犯罪活动作斗争，全力维护国家、社会、集体和个人的合法权益。
5、强化舆论正面引导。通过平台公约、用户协议完善对粉丝数量和营利权限的管理措施，对违法违规账号，将视情采取关闭禁言或者限制、禁止新增粉丝以及清空全量粉丝等惩戒措施;对多账号联动蹭炒防汛救灾热点话题、敏感事件进行恶意营销的用户账号，将取消或严禁赋予营利权限。
6、积极营造健康网络舆论生态。对“自媒体”账号，将显著标明所属 MCN机构，对利用签约账号联动炒作、多次出现违规行为的 MCN 机构，将采取限制营利权限、限制提供服务、入驻清退等处置措施。

三、积极发动发挥网络平台的正能量
7、建立健全监督举报。鼓励用户参与平台信息内容管理，收集并举报违法有害信息，发现并揭批谣言和虚假信息主动向监管部门提供相关线索，并配合调查和处理，最大限度消除负面影响。
8、积极协助求助求救。主动搜集群众网上求助求救线索，及时报告有关主管部门，并在当地党委政府的统筹指挥下，配合有关部门全力开展救灾救援工作。
9、坚决曝光违法犯罪案例。大力加强违法违规用户处置和账号曝光力度，开设警示教育专栏，定期发布违法违规用户典型案例，提醒警示用户严格遵守国家法律法规，严格履行平台公约和服务协议，加强自律自治；

转载注明：http://bbs.0550.com/t-1435939-1-1.html；

注册全局组件

2.0：

Vue.component('UITreeBase', UITreeBase)

3.0：

const app = createApp(App)
// 作为全局组件避免交叉引用
app.component('UITreeBase', UITreeBase)

Vuex

import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    design,
    user
  }
})

3.0:

import { createStore } from 'vuex'
export default createStore({
  modules: {
    design,
    user
  }
})

computed中的mapState

import { mapState } from 'vuex'
computed: {
  …mapState({
    sideBars: (state: any) => state.design.leftSidebars,
    leftSidebarMinWidth: (state: any) => state.design.leftSidebarMinWidth,
    pageScale: (state: any) => state.design.scale
  })
}

3.0

const leftSidebarMinWidth = computed((ctx: any) => ctx.$store.state.design.leftSidebarMinWidth)
const leftSidebarWidth = computed({
get () {
return this.$store.state.design.leftSidebarWidth
},
set (v: number) {
this.$store.commit('updateState', { leftSidebarWidth: v })
}
})

setup中的this

import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue'
const { ctx } = getCurrentInstance()

store

2.0 调用store是直接通过this.$store.commit/dispatch

3.0

import { useStore } from 'vuex'
const store = useStore()
store.commit('updateState', { rightSidebarIsOpen: v })

如果是要使用$store的话，需要在src目录下面创建一个shims-vux.d.ts文件，内容如下

import { Store } from 'vuex'
import { State } from './store'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}



// Vuex@4.0.0-beta.1 is missing the typing for `useStore`. See https://github.com/vuejs/vuex/issues/1736

declare module 'vuex' {
  export function useStore(key?: string): Store<State>
}

注意：.$store用法虽然能编译通过，但似乎并不能想期望的2.0那样工作；useStore()在setup里面调用，如果在方法里面调用，或则在computed的get，set里面调用useStore()返回的是undefined

$refs

2.0 直接用this.$refs.XXX引用

3.0 直接需要const refName = ref(), 然后setup中返回refName即可，refName就是ref=“refName”中的名字

$nextTick

import { nextTick } from 'vue'

Vue.component

2.x 动态注册组件

Vue.component(
  name,
  (resolve) => {
    // console.log(`@/components/ui/${this.ui}_${this.uiVersion}/${this.uiconfig.type}.vue`)
    require([`@/components/ui/${this.ui}_${this.uiVersion}/${this.uiconfig.type}.vue`], resolve)
  }
)

Vue.config.productionTip

3.x 已删除该选项

Write operation failed: computed value is readonly

这个警告有几种情况：

1. 对应computed没有定义set, 定义对应的set即可
2. store中使用了[]语法，比如state[name] = value：