在項目初期時，從零開始搭建和配置本地前端開發環境是一項很繁瑣的工作，需要考慮到項目目錄結構、項目基本配置、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

總結

以上是生活随笔為你收集整理的Vue CLI 3 多页应用项目的搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。