// vue.config.js
module.exports = {
publicPath: '/', // 基本路径
outputDir: 'dist', // 构建输出目录
assetsDir: 'static', // 静态资源目录 (js, css, img, fonts)
indexPath: 'index.html', // 指定生成的 index.html 的输出路径
filenameHashing: true, // 文件名哈希
productionSourceMap: false, // 生产环境是否生成 source map
devServer: {
port: 8080, // 开发服务器端口号
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
lintOnSave: process.env.NODE_ENV !== 'production', // 在开发环境中是否开启 eslint 检查
configureWebpack: {
// 自定义 Webpack 配置
},
chainWebpack: config => {
// 链式操作修改 Webpack 配置
},
css: {
extract: true, // 是否将 CSS 提取为独立的文件
sourceMap: false, // 是否生成 CSS source map
loaderOptions: {
// 向 CSS 相关的 loader 传递选项
sass: {
prependData: `@import "@/styles/variables.scss";`
}
}
}
}
以上是一些常用的配置选项,可以根据具体需求进行调整。例如:
publicPath
:指定项目部署的基本路径,默认为/
。outputDir
:构建输出目录,默认为dist
。assetsDir
:静态资源目录,默认为static
,这里存放的文件会在构建时被复制到outputDir
目录。indexPath
:指定生成的index.html
的输出路径,默认为index.html
。filenameHashing
:是否给生成的静态资源文件名添加哈希值,默认为true
。productionSourceMap
:生产环境下是否生成 source map 文件,默认为false
。devServer
:开发服务器相关配置,如端口号、代理等。lintOnSave
:在开发环境下是否开启 ESLint 检查,默认为true
。此外,还可以通过
configureWebpack
和chainWebpack
选项来自定义和修改 Webpack 配置,从而满足更特殊的需求。