Vue CLI 3.0 是 Vue.js 的官方命令行工具，用于快速搭建 Vue 项目。它提供了许多预设的配置和脚手架，大大简化了项目的初始化工作。在 "vue-cli3.0配置demo更新" 中，我们将探讨 `vue.config.js` 文件的详细配置，以及如何配置别名、代理跨域和 devServer。
`vue.config.js` 是 Vue CLI 3.x 中的核心配置文件，允许开发者自定义项目的构建设置。在这个文件中，你可以进行以下常见配置：
1. **基础路径 (publicPath)**: 如果你的应用部署在一个子目录下，可以设置 `publicPath` 指向该子目录，确保静态资源能够正确引用。
2. **别名 (alias)**: 在 `configureWebpack` 或 `chainWebpack` 中，可以配置模块的别名，以便在项目中简化导入路径。例如，设置 `alias: { '@': path.resolve(__dirname, 'src') }` 可以将 `@` 作为 `src` 目录的快捷方式。
3. **代理跨域 (devServer.proxy)**: 在开发环境中，如果后端 API 与前端不在同一服务器，可以使用 `devServer.proxy` 配置代理。例如，`proxy: { '/api': { target: 'http://localhost:3000' } }` 可以将所有 `/api` 开头的请求转发到本地的 3000 端口。
`babel.config.js` 文件用于配置 Babel，它是 JavaScript 的编译器，帮助我们把 ES6+ 语法转换为浏览器兼容的 ES5 语法。在 Vue 项目中，通常不需要自定义太多配置，因为 Vue CLI 已经预设了大部分需求。
`.env.development` 和 `.env.production` 文件用于分别设置开发和生产环境的变量。例如，你可以设置 `VUE_APP_API_URL` 来区分不同环境的 API 地址。
`package.json` 文件包含了项目依赖和脚本命令，如 `npm run serve`（启动开发服务器）和 `npm run build`（构建生产包）。`package-lock.json` 是 `npm` 自动生成的，记录了所有依赖的确切版本，确保团队成员间的一致性。
`src` 目录是项目的主要源码区域，包含 `main.js`（入口文件）、`App.vue`（根组件）、以及其他组件和路由等。
`public` 目录是静态资源目录，如 `index.html`（应用的主页面），以及任何需要被浏览器直接访问的文件。
`README.md` 文件通常用于记录项目的基本信息和使用指南，帮助其他开发者理解项目结构和操作流程。
总结来说，Vue CLI 3.0 提供了一个高效且可自定义的开发环境。通过配置 `vue.config.js`，我们可以实现项目特定的需求，如设置别名、代理跨域，同时利用 `.env` 文件管理环境变量，确保项目在不同环境下稳定运行。此外，`babel.config.js` 和 `package.json` 等文件则负责了代码转换和依赖管理，使得项目能顺利地在各种浏览器和环境中运行。
2026-05-21 15:32:54
140KB
1
vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序（sass）vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序（sass）vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序（sass）vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序（sass）vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序（sass）vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序（sass）
2025-12-13 10:22:35
69.69MB
1
Vue CLI 3.x 是 Vue.js 官方提供的一款强大的脚手架工具，它极大地简化了 Vue.js 应用的初始化和构建过程。在 Vue CLI 3 中，不仅支持单页面应用（SPA）的构建，还内置了对多页面应用（MPA）的支持，这使得开发者能够更高效地管理多个独立的入口页面。下面我们将详细讨论 Vue CLI 3 中如何配置和使用多页面应用。
1. **创建项目**
确保已经全局安装了 Vue CLI 3。如果还没有安装，可以通过以下命令进行安装：
```
npm install -g @vue/cli
```
然后，创建一个新的 Vue 项目，并选择一个预设或者手动配置：
```
vue create my-project
```
2. **配置多页面应用**
在项目根目录下，打开 `vue.config.js` 文件（如果没有，创建一个）。这个文件用于自定义 Vue CLI 的配置。在该文件中，我们可以配置 `pages` 属性来定义多个入口页面：
```javascript
module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js', // 入口文件
template: 'public/index.html', // 模板文件
filename: 'index.html', // 输出文件名
},
about: {
entry: 'src/pages/about/main.js',
template: 'public/about.html',
filename: 'about.html',
}
}
}
```
在这个例子中，我们定义了两个页面：`index` 和 `about`，每个页面有自己的入口文件、模板文件和输出文件名。
3. **目录结构**
根据上面的配置，`src/pages` 目录下应有对应的子目录，例如 `src/pages/index` 和 `src/pages/about`，分别包含各自的 `main.js` 文件。同时，`public` 目录下应有对应的 HTML 模板文件。
4. **路由管理**
在多页面应用中，每个页面通常有自己的路由管理。你可以为每个页面设置独立的路由，或者在全局路由文件中根据页面名称动态配置。例如，在 `src/router/index.js` 中，你可以这样配置：
```javascript
import Vue from 'vue'
import Router from 'vue-router'
const routes = [
{ path: '/', component: () => import('@/pages/index') },
{ path: '/about', component: () => import('@/pages/about') },
]
export default new Router({
routes
})
```
5. **运行与构建**
现在，你可以通过以下命令启动开发服务器或构建项目：
```
npm run serve // 开发模式
npm run build // 生产模式
```
Vue CLI 会根据 `vue.config.js` 中的配置自动处理多页面应用的构建。
6. **其他配置**
除了多页面配置外，Vue CLI 3 还提供了许多其他功能，如 CSS 预处理器支持、代码分割、热模块替换等。你可以根据项目需求在 `vue.config.js` 中进一步定制这些配置。
总结，Vue CLI 3 提供的多页面应用配置使得开发和管理多个入口页面变得简单。只需几步简单的配置，你就可以享受到高效开发的便利。对于想要学习和使用 Vue CLI 3 构建多页面应用的开发者来说，这是一个非常友好的特性。
2025-07-03 14:53:19
124KB
1
该demo基于vue-cli3.0，可以用于移动端的多页面开发
vue-cli3.0是最新版本的vue官方脚手架，有着很多新功能以及简单的目录结构，详情请参考
同时，项目使用vw进行移动端适配，viewport如今已被大多数浏览器兼容。关于vue适配vw，详情可看《》
npm install //安装依赖
npm run serve //运行
vue-cli3.0的源码中，已经自带多页面配置的源码了。在文档中，也明确说明可以直接在pages属性上进行配置。
在根目录新建vue.config.js配置文件，这样配置即可。
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/index/index.js',
// the source template
2025-07-03 14:51:43
80KB
1
VUE练习项目，VUE路由案例（商品列表），vue练习必选项目(附原码)，练习VUE基础知识点，练习了组件封装，父子组件之间得通信，组件插槽和组件路由，是一个很不错得练习项目，详细请看文章。
2023-04-04 20:31:50
208KB
1
主要介绍了vue-cli3和element做一个简单的登陆页面本文实例图文相结合给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2023-04-03 21:36:31
51KB
1
基于vue-springboot框架的机房管理系统Java课程设计，包含完整项目和课程论文。maven,vue,springboot
2023-03-19 17:13:35
67.91MB
1
这是一个基于vue-cli3开发的在线购物商城项目哦，完整程序，可以运行，下载下来先进行项目复活npm i，然后npm run serve就可以运行起来啦，欢迎学习下载哦。
2022-11-15 13:30:20
438KB
1
这是一个基于vue-cli3脚手架开发的在线购物商城的项目哦，完整程序，可以运行，下载下来先进行项目复活npm i，然后npm run serve即可运行项目啦。
2022-10-15 14:36:55
1.33MB
1