0
点赞
收藏
分享

微信扫一扫

vue el-ui 官网


http://element-cn.eleme.io/#/zh-CN/component/installation element

https://element.eleme.cn/  elementUi官网

https://cloud.tencent.com/developer/section/1489858 腾讯云 element-ui

https://cloud.tencent.com/developer/section/1489889 el-pagination 分页介绍

https://avue.top/#/component/installation avue

https://www.kancloud.cn/lengleng/pig-guide/627970 看云

https://pig4cloud.com/#/doc/pig pig

https://cli.vuejs.org/zh/ @vue/cli

 

https://github.com/ElemeFE/element element UI-github

https://www.npmjs.com/package/avue-cli avue-cli介绍

 

配置参考

#全局 CLI 配置

有些针对 @vue/cli 的全局配置,例如你惯用的包管理器和你本地保存的 preset,都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。

你也可以使用 vue config 命令来审查或修改全局的 CLI 配置。

#目标浏览器

请查阅指南中的浏览器兼容性章节。

#vue.config.js

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象:

// vue.config.js
module.exports = {
  // 选项...
}

#baseUrl

从 Vue CLI 3.3 起已弃用,请使用publicPath。

#publicPath

  • Type: string
  • Default: '/'部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath
    默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/
    这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。
    相对 publicPath 的限制
    相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath:
  • 当使用基于 HTML5 history.pushState 的路由时;
  • 当使用 pages 选项构建多页面应用时。

这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径,你可以使用一个条件式的值:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

 

lintOnSave

  • Type: boolean | 'error'
  • Default: true是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
    设置为 true 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。
    如果你希望让 lint 错误在开发时直接显示在浏览器中,你可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误,同时也意味着 lint 错误将会导致编译失败。
    或者,你也可以通过设置让浏览器 overlay 同时显示警告和错误:

// vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

当 lintOnSave 是一个 truthy 的值时,eslint-loader 在开发和生产构建下都会被启用。如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置:

// vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

productionSourceMap

  • Type: boolean
  • Default: true如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。

 

 

devServer.proxy

  • Type: string | Object如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
    devServer.proxy 可以是一个指向开发环境 API 服务器的字符串:

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000

如果你想要更多的代理控制行为,也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

举报

相关推荐

0 条评论