共计 1721 个字符，预计需要花费 5 分钟才能阅读完成。
在项目初期时，从零开始搭建和配置本地前端开发环境是一项很繁琐的工作，需要考虑到项目目录结构、项目基本配置、Webpack 配置等等。通过 Vue CLI 3 可以快速的生成一个项目，这样我们就可以专注在写应用上，而不必将大量时间花费在配置上。但是官方的 vue create 命令只能快速地建立一个单页应用的原型，想要开发多页应用还需要再配置一些东西。可同时支持 less,sass。
说明
Vue CLI 3 多页应用项目 **Git 地址: https://github.com/zydemail/v…。
初始化
git clone https://github.com/zydemail/vue-mpa.git
cd vue-mpa
npm install
使用
开发：
本地运行：npm run serve:dev 注：本地开发调试服务器接口需开启浏览器跨域，可在 Chrome 应用商店安装 Allow CORS: Access-Control-Allow-Origin 插件即可解决修复代码格式错误：npm run lintfix
打包：
开发环境: npm run dev 测试环境: npm run build:tests 生产环境: npm run build:prod
目录结构说明
│ .browserslistrc // 配置目标浏览器
│ .env.development // 开发环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量
│ .env.localdev // 本地开发环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量
│ .env.production // 生产环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量
│ .env.tests // 测试环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量
│ .eslintrc.js // eslint 配置
│ .gitignore
│ .postcssrc.js // postcss 配置，一般不会用到，使用默认值
│ babel.config.js // babel 配置，一般不会用到，使用默认值
│ package-lock.json
│ package.json
│ README.md
│ title.js // 统一配置生成页面的 title
│ vue.config.js // vue 配置，可配置 webpack 等，可参照 https://cli.vuejs.org/zh/config/
│
├─public // 此文件夹下可以放置一些静态资源，除了 index.html 会经过处理外，其他文件都会原封不动的自动复制到 htdocs 根目录下，不会经过 webpack 的处理。
│ favicon.ico
│ index.html // 所有的打包页面都会经过这个文件，本模板对多页的配置采用了统一处理，当然也可以在 vue.config.js 单独配置每个页面，可参照 https://cli.vuejs.org/zh/config/#pages
│
├─src // 源代码文件夹
│ ├─assets // 资源文件夹，可放置 css、images 等
│ │ logo.png
│ │
│ ├─components // 组件文件夹，可定义一些公共组件
│ │ Header.vue
│ │
│ ├─pages // 页面文件夹，每个页面都是一个文件夹
│ │ ├─about // about 页面
│ │ │ app.js // 一般不做更改
│ │ │ app.vue // 页面的 html、css、js 都写在这个文件里
│ │ │
│ │ ├─index
│ │ │ app.js
│ │ │ app.vue
│ │ │
│ │ └─user
│ │ └─index
│ │ app.js
│ │ app.vue
│ │
│ ├─style // 公共样式文件夹，可以定义一些公共样式，如浏览器重置样式 reset.less，此文件夹可按需求随意更改
│ │ │ index.less
│ │ │
│ │ └─core
│ │ index.less
│ │ reset.less
│ │
│ └─utils // 常用 js 工具类
│ └─core
│ http.js // http 请求库，封装 axios，可直接调用
│
└─tests // 单元测试，可忽略
└─unit
.eslintrc.js
