企业官网建设流程全解析

简介：这份资源是Vue.js新闻应用项目的第三次迭代源码包，面向已掌握Vue基础、希望通过完整项目巩固组件化开发与工程化配置的前端学习者。项目基于Vue CLI搭建，涵盖组件、路由、状态管理与样式组织等典型模块，适合作为练手项目或课程作业参考。压缩包共32个文件，以18个.vue单文件组件为主，辅以5个.js脚本、2个.css与1个.less样式文件、2个.json配置、1个.html入口及README说明等，整体约220KB，结构轻量便于快速阅读与二次开发。资源完整保留了src源码目录、public静态资源、路由与store模块，以及babel.config.js、vue.config.js等构建配置，读者可据此理解Vue项目的目录组织方式、开发服务器热重载机制与生产构建流程，并参考其中的组件拆分与路由配置思路，自行扩展新闻列表、详情页等功能。目前已有120人学习关注，适合作为Vue工程化入门的实践素材。

1. 从 hm-news-vue-03 说起：一个 Vue 项目第三次迭代到底在练什么

如果你手头正好有一个名为hm-news-vue-03的压缩包，或者你正在跟着某套课程做第三个 Vue 练手项目，大概率会有一个疑问：前两次已经写过列表渲染、组件拆分、路由跳转了，第三次还能练出什么新东西？我拆过不少这类“第 N 次迭代”的项目包，说实话，真正拉开差距的从来不是页面数量，而是数据流怎么管、请求怎么收口、组件之间怎么解耦。hm-news-vue-03这个命名本身就暗示了它是一条递进路线上的第三站，通常意味着前面已经铺完了基础页面和路由骨架，这一版开始往状态管理、接口封装、组件通信这些“看不见但决定维护成本”的地方使劲。它适合已经能跑通一个 Vue 小应用、但一遇到多组件共享数据就靠 props 层层往下传、一改接口就满项目找 URL 的人。下面我按自己拆包复现的顺序，把这份资源从结构到跑通再到避坑讲一遍。

2. 拆开 hm-news-vue-03：目录结构与技术栈的真实面貌

拿到一个 Vue 项目包，我习惯先不急着npm install，而是花五分钟把目录扫一遍。这一步能帮你判断它用的是 Vue 2 还是 Vue 3、状态管理选的什么、请求库封没封装，直接决定后面要不要改配置。

2.1 从 package.json 反推技术栈

打开根目录的package.json，重点看三块：dependencies、devDependencies和scripts。hm-news-vue-03这类项目通常落在 Vue 2 + Vue Router + Vuex + axios 这套经典组合上，构建工具多半是 vue-cli 生成的 webpack 配置。为什么先看这个？因为 Vue 2 和 Vue 3 的响应式原理、生命周期钩子、甚至main.js的挂载写法都不一样，搞错了后面全是玄学报错。

{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "vue": "^2.6.14", "vue-router": "^3.5.1", "vuex": "^3.6.2", "axios": "^0.27.2" }, "devDependencies": { "@vue/cli-service": "~5.0.0" } }

上面这段是这类项目的典型配置。scripts里用vue-cli-service说明是 vue-cli 脚手架，不是 Vite；vue版本号以^2开头就是 Vue 2，生命周期用created/mounted，状态管理用 Vuex 3。如果你机器上 Node 版本太新（比如 18 以上），vue-cli 5 有时会报 OpenSSL 相关的错，这是后面避坑章要专门讲的点。

2.2 目录分层：src 下每个文件夹的职责

扫完 package.json，接着看src目录。一个结构清晰的hm-news-vue-03通常长这样：

这张表不是让你背，而是让你在打开项目时有个对照。如果某个项目里api层是散的、请求直接写在组件里，那说明它还在“能跑就行”的阶段；如果store按模块拆了modules文件夹，那这一版大概率在练状态管理的工程化。

2.3 依赖安装与首次启动

确认完结构就可以装依赖了。我一般会先锁 Node 版本，避免因为环境差异导致装包失败。

# 查看当前 Node 版本，vue-cli 5 建议用 14 或 16 node -v # 安装依赖，如果 package-lock.json 存在优先用 npm ci npm install # 启动开发服务器 npm run serve

npm install会按package.json拉取所有依赖，如果项目里带了package-lock.json，用npm ci更稳，它能严格按锁文件版本安装，避免“我这儿能跑你那儿报错”。npm run serve实际执行的是vue-cli-service serve，默认起在localhost:8080，支持热更新。启动成功后浏览器打开这个地址，如果页面白屏，先按 F12 看 Console 报什么错，八成是某个依赖没装全或者路由配置有笔误。

3. 把数据流跑通：Vuex 状态管理与接口封装怎么配合

这一章是hm-news-vue-03这类项目真正的核心。前两版你可能习惯了在组件created里直接axios.get然后赋值给data，但到了第三版，多个页面要共享同一份数据（比如用户信息、新闻分类），再这么写就会出现“A 页面改了 B 页面不知道”的翻车现场。Vuex 就是来解决这个的。

3.1 为什么这一版要引入 Vuex

先说选型理由。组件通信有三种常见方式：props 向下传、$emit向上传、事件总线。前两种在层级浅的时候够用，但一旦出现“兄弟组件要同步数据”或者“页面 A 的操作要影响页面 B”，props 就得一层层中转，代码会变得极难维护。Vuex 把所有共享状态抽到一个全局仓库，任何组件都能通过this.$store读写，读写路径清晰可控。

hm-news-vue-03里典型的 store 结构是这样的：

// src/store/index.js import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ state: { // 全局共享的新闻列表 newsList: [], // 当前选中的分类 activeCategory: 'all' }, mutations: { // 唯一能直接改 state 的地方，必须是同步函数 SET_NEWS_LIST(state, payload) { state.newsList = payload }, SET_ACTIVE_CATEGORY(state, payload) { state.activeCategory = payload } }, actions: { // 异步请求放在 action 里，拿到数据后 commit 给 mutation async fetchNews({ commit }, category) { const res = await axios.get('/api/news', { params: { category } }) commit('SET_NEWS_LIST', res.data.list) } }, getters: { // 类似计算属性，基于 state 派生数据 newsCount: state => state.newsList.length } })

这段代码的逻辑链是：组件里dispatch('fetchNews')→ action 发请求 → 拿到数据commit('SET_NEWS_LIST')→ mutation 改 state → 所有依赖这个 state 的组件自动更新。参数上，category是 action 的载荷，用来区分拉哪个分类的新闻；res.data.list是接口返回结构，实际项目里要按真实返回字段调整。注意 mutation 必须是同步的，这是 Vuex 的硬性约束，异步逻辑一律放 action。

3.2 axios 实例封装与请求拦截器

直接在 action 里用全局 axios 有个问题：baseURL、超时时间、token 注入这些每个请求都要写一遍。工程化的做法是封装一个 axios 实例。

// src/utils/request.js import axios from 'axios' // 创建独立实例，避免污染全局 axios 默认配置 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API || '/api', timeout: 5000 }) // 请求拦截器：发出去之前统一处理 service.interceptors.request.use( config => { // 常见做法是从本地存储取 token 塞进请求头 const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }, error => Promise.reject(error) ) // 响应拦截器：拿到数据先做一层统一判断 service.interceptors.response.use( response => { const res = response.data // 假设后端约定 code 为 200 才算成功 if (res.code !== 200) { return Promise.reject(new Error(res.message || '请求失败')) } return res }, error => Promise.reject(error) ) export default service

baseURL用process.env.VUE_APP_BASE_API是为了区分开发和生产环境，你可以在项目根目录建.env.development和.env.production分别配置。timeout: 5000是 5 秒超时，网络慢的场景可以调大。请求拦截器里注入 token 是常见做法，响应拦截器里统一判断业务状态码能省掉每个组件里重复的if (res.code === 200)。封装完之后，action 里改成import request from '@/utils/request'，用request.get替代axios.get。

3.3 组件里怎么触发和消费状态

封装好了，组件里就干净很多。一个新闻列表组件大致这样写：

// src/views/NewsList.vue 的 script 部分 export default { name: 'NewsList', computed: { // 用计算属性映射 store 里的 state，state 变组件自动更新 newsList() { return this.$store.state.newsList }, activeCategory() { return this.$store.state.activeCategory } }, created() { // 组件创建时拉一次数据 this.$store.dispatch('fetchNews', this.activeCategory) }, methods: { handleCategoryChange(category) { // 切换分类：先改 state，再重新拉数据 this.$store.commit('SET_ACTIVE_CATEGORY', category) this.$store.dispatch('fetchNews', category) } } }

这里computed里返回 store 的 state，是 Vuex 响应式生效的关键——组件不直接改 state，而是通过dispatch和commit。created钩子里触发首次请求，handleCategoryChange演示了“改状态 + 重新请求”的联动。如果你觉得this.$store.state.xxx写起来啰嗦，可以用mapState、mapActions辅助函数，但原理是一样的。

4. 组件拆分与路由配置：让页面结构撑得住后续迭代

数据流跑通之后，接下来要解决的是“页面怎么组织”。hm-news-vue-03作为第三版，通常会在组件复用和路由懒加载上做文章，这两点直接决定项目体积和首屏速度。

4.1 路由懒加载与动态路由

如果所有页面组件都在router/index.js顶部import进来，打包后所有代码会塞进一个 JS 文件，首屏加载慢。懒加载的写法是用动态import()：

// src/router/index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', redirect: '/news' }, { path: '/news', name: 'NewsList', // 动态 import，webpack 会把这个组件单独打包 component: () => import('@/views/NewsList.vue') }, { path: '/news/:id', name: 'NewsDetail', component: () => import('@/views/NewsDetail.vue'), props: true } ] const router = new VueRouter({ mode: 'hash', // 或 'history'，history 需要服务端配合 routes }) export default router

() => import(...)是懒加载的核心，webpack 遇到这种写法会把对应组件拆成独立 chunk，只有路由被访问时才加载。props: true让路由参数:id自动作为 props 传给组件，组件里直接props: ['id']就能用，比this.$route.params.id更解耦。mode选hash还是history：hash 模式 URL 带#，刷新不会 404，部署简单；history 模式 URL 干净，但需要服务端把所有路径回退到index.html，否则刷新就白屏。

4.2 可复用组件的 props 与事件设计

第三版项目里通常会把“新闻卡片”这类重复出现的 UI 抽成组件。抽组件的关键是设计好 props 和事件边界。

// src/components/NewsCard.vue export default { name: 'NewsCard', props: { // 新闻数据对象，必传 item: { type: Object, required: true }, // 是否显示摘要，默认显示 showSummary: { type: Boolean, default: true } }, methods: { handleClick() { // 不直接跳转，把点击事件抛给父组件决定 this.$emit('card-click', this.item.id) } } }

props里type和required是给组件加约束，传错类型 Vue 会在控制台警告，这在多人协作时能省很多排查时间。$emit('card-click', ...)把跳转逻辑交给父组件，组件本身只负责展示和抛事件，这样同一个卡片组件既能用在列表页也能用在搜索结果页，跳转目标由父组件决定。这是“展示与逻辑分离”的基本功。

4.3 列表渲染的 key 与性能注意点

列表渲染绕不开v-for和:key。key必须是唯一且稳定的值，通常用后端返回的id，千万别用数组下标。

<ul> <li v-for="item in newsList" :key="item.id"> <news-card :item="item" @card-click="goDetail" /> </li> </ul>

用下标做 key，在列表有插入、删除、排序操作时，Vue 的 diff 算法会复用错误的 DOM 节点，导致输入框内容错位、动画异常这类“看起来像玄学”的问题。用item.id就能避免。另外如果列表很长，可以考虑虚拟滚动，但hm-news-vue-03这种练手项目一般数据量不大，先把 key 写对就够了。

5. 避坑与排查：这类 Vue 项目最容易翻车的五个地方

这一章是我拆包复现时血泪经验最集中的部分。下面五条按“现象 → 原因 → 解决”写，你遇到问题时可以直接对号入座。

5.1 启动报错error:0308010C:digital envelope routines::unsupported

现象：npm run serve直接报这个 OpenSSL 错误，进程退出。原因：Node 17 及以上版本默认用 OpenSSL 3，而老版本 vue-cli 依赖的 webpack 4 还在用旧的加密算法。解决：要么把 Node 降到 16，要么在package.json的 scripts 里加环境变量NODE_OPTIONS=--openssl-legacy-provider。我一般选降 Node 版本，因为改环境变量有时会引出别的兼容问题。

5.2 页面白屏但 Console 无报错

现象：浏览器打开一片白，F12 里 Console 干净，Network 里 JS 都 200。原因：多半是路由mode: 'history'但服务端没配回退，或者router-view写在了错误的层级。解决：先临时把 mode 改成hash看是否恢复，如果恢复就是服务端配置问题；再检查App.vue里<router-view>有没有被条件渲染包住。

5.3 Vuex 里改了 state 但组件不更新

现象：dispatch之后state确实变了，但页面没反应。原因：常见有两种，一是直接给 state 赋值而没走 mutation（比如this.$store.state.newsList = xxx），二是给对象新增属性没用Vue.set。解决：所有 state 修改必须走 mutation；给响应式对象加新属性用this.$set(obj, key, value)，Vue 2 的响应式对新增属性不敏感。

5.4 接口 404 但 URL 看着没问题

现象：请求发出去返回 404，Network 里看 URL 是/api/news。原因：开发环境下/api前缀需要 devServer 代理到真实后端，如果vue.config.js里没配proxy，请求就打到前端服务器自己身上了。解决：在vue.config.js里加代理配置。

// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', // 后端真实地址 changeOrigin: true, pathRewrite: { '^/api': '' } // 按后端约定决定要不要去掉前缀 } } } }

changeOrigin: true让代理请求的 host 变成目标地址，避免后端做 host 校验时拒绝。pathRewrite看后端接口到底带不带/api，带就不写这行，不带就重写掉。

5.5 打包后图片 404 或路径错乱

现象：npm run build之后部署，图片全裂。原因：vue.config.js里publicPath默认是/，如果你的项目部署在子路径下（比如/news/），资源路径就对不上。解决：把publicPath改成实际部署路径，或者用相对路径'./'。另外图片如果放在src/assets里用相对路径引用，webpack 会处理；放在public里则要写绝对路径，两者规则不同，别混用。

6. 进阶技巧：用环境变量和构建分析把项目收尾

跑通只是及格线，真正让hm-news-vue-03这个练手项目变成可复用经验，是学会用环境变量管理配置、用构建分析看体积。这两招在后续任何 Vue 项目里都用得上。

6.1 环境变量分环境管理

vue-cli 支持.env系列文件，变量必须以VUE_APP_开头才会被注入到客户端代码里。

# .env.development VUE_APP_BASE_API=/api VUE_APP_ENV=development # .env.production VUE_APP_BASE_API=https://api.example.com VUE_APP_ENV=production

代码里用process.env.VUE_APP_BASE_API读取，npm run serve自动加载 development，npm run build自动加载 production。这样切环境不用改代码，也避免了把生产地址硬编码进仓库。注意.env.local这类本地文件要加进.gitignore，别把个人配置提交上去。

6.2 用 webpack-bundle-analyzer 看打包体积

项目大了之后，打包文件动辄几 MB，得知道是谁占的。装一个分析插件：

npm install --save-dev webpack-bundle-analyzer

然后在vue.config.js里挂上：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { configureWebpack: { plugins: [ // 只在需要分析时开启，平时关掉避免拖慢构建 process.env.ANALYZE ? new BundleAnalyzerPlugin() : null ].filter(Boolean) } }

跑ANALYZE=true npm run build，会自动打开一个可视化页面，每个 chunk 的大小一目了然。常见优化点：把moment、lodash这类大库换成按需引入或轻量替代，路由懒加载没配的补上。这一步做完，你对“这个项目到底重在哪”就有数了。

6.3 一个我每次都会走的验证习惯

最后说个习惯。每次拆完一个 Vue 项目包，我不会只看它能不能跑起来，而是会强制走一遍“改一个接口字段 → 看数据流是否贯通 → 再改回去”的流程。具体做法是：随便挑一个 action，把请求参数改一个值，看 Network 里请求有没有变、页面有没有跟着更新。如果改了没反应，说明数据流某处断了，可能是组件没订阅 state，也可能是 mutation 没触发。这个动作花不了两分钟，但能帮你确认整个 Vuex + axios + 组件的链路是真通的，而不是“碰巧显示了默认数据”。从那以后我每次拿到新项目包都强制走一遍这个验证，比读十遍代码都管用。希望帮到你。

本文还有配套的精品资源，点击获取