我們介紹了使用mpvue開發小程式所需要的一些開發環境的搭建，並建立了第一個mpvue小程式程式碼骨架並將其執行起來。在本文中，我們來研究熟悉一下mpvue專案的主要目錄和檔案結構。

在Visual Studio Code裡面開啟專案資料夾，我們可以看到類似如下的檔案結構：

firstapp
├── package.json
├── project.config.json       
├── static            
├── src
│    ├── components
│    ├── pages
│    ├── utils
│    ├── App.vue
│    └── main.js
├── config
│   ├── index.js
│   ├── dev.env.js
│   └── prod.env.js
└── build
 

1）package.json檔案

package.json是專案的主配置檔案，裡面包含了mpvue專案的基本描述資訊、專案所依賴的各種第三方庫以及版本資訊、以及可執行的指令碼資訊。

我們看到該檔案中的scripts部分配置了4個可執行的命令：

"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"

• dev和start是兩個等價的命令，執行其中之一都可以將專案以開發模式啟動。執行方式是：

npm start
npm run dev

• lint指令是使用ESLint來進行程式碼語法和格式檢查，以及修復一些可自動修復的問題。執行方式是：

npm run lint  #檢查語法和格式
npm run lint -- --fix #檢查程式碼語法和格式，並修復可自動修復的問題

• build指令是用於生成釋出用程式碼的，它會對程式碼進行一些壓縮優化處理。當小程式開發完成後，將要提交稽核時，請使用build來生成釋出的程式碼。

2）project.config.json檔案

project.config.json檔案是用於管理微信開發者工具的小程式專案的配置檔案，其中記錄了小程式的appid、程式碼主目錄、以及編譯選項等等資訊，在微信開發者工具中匯入小程式專案的時候主要是通過該配置檔案讀取和寫入配置資訊。

3）static目錄

static目錄可以用於存放各種小程式本地靜態資源，如圖片、文字檔案等。程式碼中可通過相對路徑或絕對路徑進行訪問， 如：

<img src="/static/button.png" />
<img src="../../../static/button.png" />

4）build目錄

build目錄下是一些用於專案編譯打包的node.js指令碼和webpack配置檔案。一般情況下不需要修改這些檔案。

5）config目錄

config目錄下包含了用於開發和生產環境下的不同配置，dev.env.js用於開發環境，prod.env.js用於生產環境，你可以將開發階段和生產階段不一樣的資訊（如後臺API的url地址等）配置到這兩個檔案中去，然後在程式碼中以變數的形式進行引用。例如，這2個檔案中分別配置了不同的API_BASE_URL值：

// dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_BASE_URL: '"http://127.0.0.1:8080/api"'
})

// prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  API_BASE_URL: '"https://www.my-domain.com/api"'
}

那你在編寫請求後端API的程式碼時，你就可以使用這個環境配置，像這樣：

const baseURL = process.env.API_BASE_URL
wx.request({
  url: `${baseURL}/products`
})

這樣一來，開發階段和上線釋出階段的環境可以清楚的區分開來。

5）src目錄

src目錄是我們主要進行小程式功能編寫的地方。預設生成的demo程式碼為我們建立了幾個子目錄：components、pages和utils，還有2個檔案：App.vue和main.js。其實它們都不是必須的，可以按照自己的風格進行定義和配置。不過預設建立的這個結構基本上是一個約定俗成的結構了，比較易於理解，所以我們可以遵循這個結構進行開發。

• components：在實際開發中，我們可以儘量將介面上可複用的部分，提取成vue元件放入該目錄

• pages：存放小程式的頁面。請遵循每個小程式頁面放入一個單獨子目錄的組織形式

• utils：可選（可刪）。可以將程式碼中一些公用工具函式組織成模組放入該目錄下

• 可新建其他目錄，存放你希望組織起來的程式碼。比如公用的業務邏輯程式碼、請求後臺API的程式碼等等

• main.js + App.vue：這兩個是入口檔案，相當於原生小程式框架中的app.json和app.js的複合體。

原作者連結：https://www.jianshu.com/p/2e98cc166dbd