基于 Vue 的最佳实践

本项目是基于 Web 开发最佳实践 的扩展

解决 globalThis 的问题

参考 : 解决浏览器端 globalThis is not defined 报错

解决方案
<head> 中加入

1
2
3
<script>
this.globalThis || (this.globalThis = this);
</script>

在低版本手机上访问页面需要对代码打包进行 es2015 转义

vite.config.ts

1
2
3
4
5
// ...
build: {
target: "es2015";
}
// ...

组件的自动加载

自动加载的弱项
如果组件使用自动加载也可以, 但是需要自动引入 app.use(Comp) 这种方式, 并在配置文件中加入 components

全部加载的弱项
全部加载会在打包的时候 minify 会解析所有的 css 样式, 导致时间过长 (10min+)

所以组件使用 unplugin-vue-components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver, ElementPlusResolver, VantResolver } from "unplugin-vue-components/resolvers";
export default defineConfig(({ mode }) => {
return {
// ...
plugins: [
// ...
Components({
resolvers: [AntDesignVueResolver(), ElementPlusResolver(), VantResolver()],
dts: true,
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
}),
// ...
],
// ...
};
});

移除 console 日志

打包启用 terser, 配置 tersor 的选项

1
2
3
4
5
6
7
8
9
10
11
12
13
export default defineConfig(({ mode }) => {
return {
build: {
// ...
minify: "terser",
terserOptions: {
compress: {
drop_console: true,
},
},
},
};
});

参考

Vue 常见问题

1. Vue 使用代理(proxy) 注意

首先记录两个地址, 在 vue/vue-cli/axios 中经常会遇到代理以及请求的问题, 为了这个, 我们需要设置代理服务器等信息便于开发调试

注意, 在设置 axios 的 baseUrl 之后 proxy 就不可用了. 需要注意这一点

1
2
// 这里设置代理, 根据环境来设定
const baseUrl = "development" === process.env.NODE_ENV ? "/api" : process.env.VUE_APP_URL;

2. 路由死循环

1
2
3
4
5
6
7
8
9
10
11
vue-router.esm.js?8c4f:2257 RangeError: Maximum call stack size exceeded
at JSON.stringify (<anonymous>)
at eval (vuex-persistedstate.es.js?0e44:1)
at eval (vuex-persistedstate.es.js?0e44:1)
at eval (vuex.esm.js?2f62:472)
at Array.forEach (<anonymous>)
at Store.commit (vuex.esm.js?2f62:472)
at Store.boundCommit [as commit] (vuex.esm.js?2f62:409)
at Object.vue__WEBPACK_IMPORTED_MODULE_0__.default.$hideLoading (use.js?2e7e:13)
at eval (router.js?41cb:141)
at iterator (vue-router.esm.js?8c4f:2300)

3. store 中使用 commit 无法触发数据的变更

流程: 初始化 -> 网络请求 -> 调用 muation 修改数据不会触发 store 数据的变更, 在页面中使用 computed 的时候数据无法获取到数据, 在 action 则可