Vue 创建项目后没有 webpack.config.js（vue.config.js）文件

码农-小林

已于 2022-08-26 13:35:51 修改

阅读量5.4k

点赞数 7

文章标签： javascript vue.js webpack

于 2022-08-11 18:04:24 首次发布

本文链接：https://blog.csdn.net/m0_63853518/article/details/126290584

版权

Vue CLI 3.x 创建的项目中，vue.config.js 文件用于自定义配置，代替了 webpack.config.js。该文件可以修改端口、配置代理、设定 publicPath 等。本文详细介绍了 vue.config.js 的各项字段属性，包括 devServer、outputDir、publicPath、pages 等，帮助开发者理解并定制自己的 Vue 项目构建设置。

摘要由CSDN通过智能技术生成

Vue vue-config.js（字段属性详细介绍）

Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。

vue-cli3 之后创建的时候并不会自动创建 vue.config.js，因为这个是个可选项，所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。

开发者一般不需要再去知道 weboack 做了什么，所以没有暴露 webpack 的配置文件，但你依然可以创建 vue.config.js 去修改默认的 webpack。

手动创建一个 vue.config.js：

module.exports = {
devServer: {
// 端口号
port: 8080,
// 配置不同的后台API地址
proxy: {
'/api': {
target: 'http://www.dzm.com',
ws: false,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
Vue vue-config.js（字段属性详细介绍）

module.exports={
// 部署应用包时的基本url。
// baseUrl:"/", //从 Vue CLI 3.3 起已弃用
publicPath:"/"，
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。
// 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
// 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。
// 也可以使用三元运算符配置开发和正式环境上不同的路径

outputDir:"dist", // 打包后生成的生产环境构建文件的目录，dist是默认值。