vue配置文件说明

版本：

vue 2.6.11

vue/cli 4.5.13

.env 和 .env.development

1. 文件类型
    .env 全局默认配置文件，不论什么环境都会加载合并
    .env.development 开发环境下的配置文件
2. 命名规则
    属性名必须以VUE_APP_开头，比如VUE_APP_NAME
3. 文件的加载
    根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载
    比如执行npm run serve命令，会自动加载.env.development文件
    注意：.env文件无论是开发还是生成都会加载
4. 使用
    使用时利用process.env.VUE_APP_XXX获取
    注意：配置文件在vue模板文件的data之后加载

vue.config.js

1. publicpath
    部署应用包时的基本 URL,这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
2. outputDir
    输出文件目录，当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
3. assetsDir
    放置生成的静态资源 (js、css、img、fonts) 的目录。
4. indexPath
    指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
5. pages
    在 multi-page（多页）模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
    其值应该是一个对象，对象的 key 是入口的名字，value 是：一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；或一个指定其 entry 的字符串。
6. configureWebpack
    如果这个值是一个对象，则会通过webpack-merge合并到最终的配置中。
    如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
7. chainWebpack
    是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
8. devServer
    是一个对象，其中
    port配置属性指定了开启服务的端口号
    host设置的是服务器的主机号
    open设置的是是否自动打开浏览器
    headers可以在HTTP响应中注入一些HTTP响应头
    hotOnly是在编译报错更新正确后，重新遍历更新，让浏览器不刷新，与其相对的有hot，hot:true在更新时会直接刷新浏览器
    proxy如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过vue.config.js 中的devServer.proxy选项来配置。

package.json

1. dependencies
    需要引入页面使用的依赖包
2. devDependencies
    开发环境中需要使用的依赖包
3. scripts
    指定了运行脚本命令的npm命令行缩写
4. config
    config字段用于向环境变量输出值。
5. engines
    指明了该项目所需要的node.js版本

babel.config.js

其中存放的是插件和设置的集合
在plugins中存入数组，设置相关的参数
module.exports = {
      presets: [
        '@vue/app'
      ],
      // 如果需要按需引入第三方库，在下面添加
      plugins:[
          [
              "import",
              {
                  "libraryName": "vant",
                  "libraryDirectory": "es",
                  "style": true
                }
          ],
          [
              "import",
              {
                  "libraryName": "we-vue",
                  "style": "style.css"
                },
                "we-vue"
          ]
      ]
    }