vue.config.js

vue.config.js

1、publicPath (重点)

• Type: string
• Default: ‘/’

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/, 则设置 publicPath 为 /my-app/。

这个会值也可以被设置为空字符串（”“）或是相对路径（”./"), 这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

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

相对 publicPath 的限制

相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:

• 当使用基于 HTML5 history.pushState 的路由时；

• 当使用 pages 选项构建多页面应用时。

  * 解决 Vue 项目打包后打开一片空白：

• 第一步： 注释路由中的 mode: ‘history’

• 第二步： vue.config.js 中配置： publicPath: process.env.NODE_ENV === “production” ? ‘./’ : ‘/’

2、indexPath （了解）

• Type: string
• Default: ‘index.html’

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

3、filenameHashing (了解)

• Type：boolean
• Default: true

默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index.html，你可以通过将这个选项设为 false 来关闭文件名哈希。

4、lintOnSave (熟悉)

• Type: boolean | ‘warning’ | ‘default’ | ‘error’
• Default: ‘Default’

是否在开发环境下通过 eslint-loader 在每次保存 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。

设置为 true 或 ‘warning’ 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。

如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave：‘default’。这会强制 eslint-loader 将 lint 错误输出为编译失败。同时也意味着 lint 错误将会导致编译失败。

设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误，这意味着 lint 警告将会导致编失败。

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

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

5、devServer (重点)

• Type: Object

所有 webpack-dev-server 的选项都支持。注意：

• 有些值像 host、port 和 https 可能会被命令行参数覆写。
• 有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。

* Proxy

type: string | Object

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题 （说白了就是跨域的解决方案）可以通过 vue.config.js 中的 deserver.prosy 选项来配置。

deserver.proxy 可以是一个指向开发环境 API 服务吕的字符串：

module.exports = {
    devServeeer: {
		proxy: 'http://localhost:4000'  //这里假设项目端口号非4000，而后端端口号为4000，从而造成了跨域
    }
}

这是针对单个接口地址的描述，也可以说是一种简单写方式，完整且多个接口地址的写法：

module.exports = {
	deServer: {
		proxy: {
			'/api': {
				target: '<url>',
				changeOrigin: true,
				pathRewrite: {
				'^/api': "/"
				}
			},
			'/foo': {
				target: '<other_url>'
			}
		}
	}
}

注意这里面 /api 是你自己定义的， 写成什么都可以。target 设置你调用的接口域名和端口号。这里理解成用 ^/api 代替 target 里面的地址，后面组件中我们调接口时直接用 api 代替。 比如我要高用 http://codesohigh.com/hello ，直接写 /api/hello 即可。