Vue的 vue.config.js 配置

简介：

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

详细配置官方文档:配置参考 | Vue CLI

内部配置详解：

每次在用的时候都是直接从网上找一个复制下来，用到哪个地方修改哪里，但是一直不知道具体是怎么操作，这次总结下.

module.exports = { publicPath: '/', // 部署应用包时的基本 URL ,默认'/' outputDir: 'dist',// 构建输出目录 assetsDir: 'static',// 静态资源目录 lintOnSave: process.env.NODE_ENV === 'development' ? 'error' : false, productionSourceMap: false, // 生产环境 source map devServer: { ...},// 配置 webpack-dev-server 行为。 configureWebpack: {...}, // 配置 Webpack chainWebpack(config) {.....} // 调整内部的 webpack 配置。 }

以下写的是部分常用配置：看全部请看官方文档

publicPath#

• Type: string
• Default: '/'

1.部署的基础路径(就是你上线的时候服务器的ip，比如http://10.170.6.111The domain name My-App.com is for salehttp://10.170.6.111)默认假设你的应用将会部署在域名的根部

2.如果你的应用时部署在一个子路径下，那么你需要在这里 指定子路径。比如，如果你的应用部署在 https://www.foobar.com/my-app/

3.这个值也可以"./"是相对路径 不过尽量不要

outputDir#

• Type: string
• Default: 'dist'

不建议动，这个就是npm run build打包后生成文件的目录

indexPath#

• Type: string
• Default: 'index.html'

  指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

pages#

• Type: Object
• Default: undefined

在 multi-page (多页面应用)模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是

拓展：

单页面应用（spa）

概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。
优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。
缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。

多页面应用（mpa）

概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。
优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。
缺点：页面跳转较慢。

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

lintOnSave#

• Type: boolean | 'warning' | 'default' | 'error'
• Default: 'default'

1.在 开发模式下 通过eslint-loader（eslint的预编译器）保存检查时代码，--------@vue/cli-plugin-eslint被安装后生效

2.有效的值：`ture` | `false` | `"error"`  分别会警告和报错

3.让代码检查显示在浏览器上，使用 lintOnSave: 'default' ，会强制eslint-loader将代码检查编译为错误

4.若是个真实的值时，eslint-loader 在开发和生产构建下都会被启用。如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置：

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

configureWebpack#

• Type: Object | Function

值为：对象，则通过 webpack-merge 合并到最终的配置中。

值为：函数,则会接收被解析的配置作为参数

更多细节可查阅：配合 webpack > 简单的配置方式

chainWebpack#

• Type: Function

• 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

  更多细节可查阅：配合 webpack > 链式操作

devServer#

• Type: Object

说明：如果你的前端应用和后端 API 服务器没有运行在同一个主机上， 你需要在开发环境下将 API 请求代理到 API 服务器。 这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置代理服务器。

1.proxy会拦截所有url中可以成功匹配到 ‘/api’ 的请求

2.它会把拦截到的请求中的baseUrl替换为此处的target

 devServer: { open: process.platform === 'darwin',// 编译完成是否打开网页 host: '0.0.0.0',// 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问 port: 8080,// 访问端口 https: false,// 编译失败时刷新页面 hotOnly: false,// 开启热加载 proxy: { '/api': {//拦截器(拦截链接中有/api) target: 'http://localhost:8880', //目标地址 请求的后台接口 changeOrigin: true, secure: false, // ws: true, pathRewrite: { '^/api': '/static/mock' // 请求数据路径别名,这里是注意将static/mock放入public文件夹 } } },

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/3223.html