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变量