Common Vue Development Pitfalls and Solutions for WeChat Mini Programs

When developing Vue‑based WeChat mini‑programs, several common issues arise, such as passing parameters between list and detail pages, handling cross‑origin requests during local development, and organizing Axios requests.

Parameter passing can be done via query strings ( {path: 'detail', query: {id: 1}}) or route params ( {name: 'Detail', params: {id: 1}}), each with different URL formats and retrieval methods ( this.$route.query.id vs this.$route.params.id).

Cross‑origin problems are solved by configuring a dev server proxy (example

proxyTable: {'/api': {target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, pathRewrite: {'^/api': ''}}}

) and restarting npm run dev.

Axios can be wrapped to centralize request and response interceptors, allowing token injection and unified error handling.

UI libraries such as Vant should be imported on demand using babel-plugin-import and registered components in main.js.

Scoped CSS cannot affect third‑party components; deep selectors ( .van-tabs /deep/ .van-ellipsis { color: blue }) or >> in Sass/LESS solve the problem.

Timers should be cleared in beforeDestroy or with $once('hook:beforeDestroy', ...) to avoid performance leaks.

Responsive design can use a rem.js script that sets html{font-size} based on viewport width.

Vue‑Awesome‑Swiper provides a flexible carousel; install it and configure options in the component’s data.

Large source‑map files can be disabled by setting productionSourceMap: false in config/index.js, and gzip compression can be enabled with productionGzip: true.

Webpack’s bundle analyzer ( npm run build --report) helps locate oversized modules.

Route lazy‑loading (

component: resolve => require(['@/view/index/index'], resolve)

) reduces initial bundle size.

Keep‑alive caching preserves list data and scroll position when navigating back from a detail page.

Vue’s v‑model is syntactic sugar for :value and @input; custom components can define model options to avoid prop/event name conflicts.

Mixins allow reusable filters such as fixed‑two‑decimal formatting ( mixin_fixed2) and number‑to‑Chinese conversion.

When deploying with history mode, the server must be configured to serve the index page for unknown routes.