vue配置文件说明

wuchangjian2021-11-16 10:15:40编程学习

版本:

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"
          ]
      ]
    }

返回列表

上一篇:XML的相关概念

下一篇:2021-11-16

相关文章

附近python培训中心

Python是一门免费、开源的跨平台高级动态编程语言,支持命令式编程、函数...

修改 ubuntu 16.04 开机Logo

修改 ubuntu 16.04 开机Logo-owen0725-ChinaUnix博客...

在linux下使用dcoker配置ftp服务器

最近做项目需要用到ftp服务器,将生成的文件放到上面让甲方访问࿰...

解决复制系统路径导致python编码错误

实验环境: window10操作系统 python2版本 pycha...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。