有些 webpack 选项是基于 vue.config.js 中的值设置的,所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path;你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方,以确保所有的部分都能正常工作在一起。
const path = require('path')
function resolve(dir) {
// __dirname 执行当前文件的文件夹路径 例如:vue.config.js的文件夹绝对路径
return path.join(__dirname, dir)
}
module.exports = {
// 默认为域名下的根路径 /
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// 打包后的文件夹
outputDir: 'dist',
// 项目打包之后,用于放置生成的静态资源 (js、css、img、fonts)
assetsDir: 'static',
// 是否开启eslint保存检测,有效值:ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
},
configureWebpack: {
resolve: {
alias: {
'@': resolve('src')
}
}
},
}