vue-cli3.0 + vue2.0 + iview----3.配置與目錄結構

1.創建請見 戳我

2.跟着創建走過一遍之後呢，目錄我就不上圖了，自己創建的自己知道哈，不知道的自己動動爪吧，天也暖和了

3.跟着iview的目錄結構可以做參考，不知道iview是啥？戳我

4.

.
├── git git配置
├── node_modules npm install 生成
└── public 打包所需靜態資源
    ├── index.html 模板文件
    └── favicon.ico 瀏覽器圖標 
└── src
    ├── api AJAX請求
    └── assets 項目靜態資源
        ├── fonts 自定義圖標資源
        ├── music 音樂資源
        ├── style 樣式文件
        ├── logo.png
        └── images 圖片資源
    ├── components 業務組件
    ├── config 項目運行配置
    ├── libs 封裝工具函數
    └── router 路由配置
        ├── index.js
        └── routers.js
    ├── store Vuex配置
    ├── views 頁面文件
    ├── App.vue
    ├── main.js
    ├── .browserslistrc 瀏覽器
    ├── .editorconfig 編輯器
    ├── .eslintrc.js eslint配置規則
    ├── .gitignore Git提交時忽略配置
    ├── babel.config.js babel配置
    ├── package.json
    ├── package-lock.json
    ├── postcss.config.js
    ├── README.md
    └── vue.config.js

```

如果lint使用了 Prettier，使用iveiw的一些在html爲自閉合標籤的時候比如input，會報錯Parsing error: x-invalid-end-tag (vue/no-parsing-error)，在.eslintrc.js中添加

5. 多環境配置【開發+測試+生產】參考https://blog.csdn.net/qq_37055675/article/details/85047451

本地環境打包： npm run dev

測試環境打包： npm run test

生產線上環境打包：npm run build

不同環境打包請求不同接口需要單獨配置，步驟：

瞭解命令含義 戳我[ Vue ClI 服務 使用命令 ]

--5.1 修改package.json-->scripts 添加打包命令 ：

        "test":"vue-cli-serve build --mode test" 【--mode 指定環境模式，默認值：development】

--5.2 在項目目錄下建立.env & .env.test 文件

       .env

NODE_ENV = "production"
VUE_APP_FLAG = "pro"

       .env.test [outputDir: 打包時輸出到目錄文件名，默認dist]

NODE_ENV = "production"
VUE_APP_FLAG = "test"
outputDir = test

--5.3   vue.config.js 中使用

outputDir: process.env.outputDir

--5.4 配置api變量