通过vue-cli 3.0 工具生成的项目,默认隐藏了所有webpack的配置项,目的是为了屏蔽项目配置过程,让程序员把工作重心,放在具体的功能和业务逻辑上。
我们可以通过vue.config.js文件修改webpack的默认配置。
官方配置
//vue.config.js配置
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
//导出一个对象
module.exports = {
//配置选项
//部署应用包的基本URL
publicPath: "./"
//构建输出生产环境项目项目 默认(dist)
outputDir:"dist"
assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
indexPath:"index.html",//相对于(outputDir)。指定生成的index的输出目录。./dist/index.html
filenameHashing:'true'//静态文件中是否使用默认值
pages:{
} //配置多页面应用,默认为undefind
lintOnSave:false //是否保存的时候使用,eslint-loader 进项检测
runtimeCompiler:true //是否使用带浏览器内编译器的完整构建版本 // 运行时版本是否需要编译
transpileDependencies:[] //编译node_module中的文件,通过babel-loader
productionSourceMap:false //是否需要生产环境资源地图
crossorigin:"" //是否需要添加crossorigin属性
integrity:false // 是否启用SRI
configureWebpack: config => {
// webpack配置,值位对象时会合并配置,为方法时会改写配置
if (debug) {
// 开发环境配置
config.devtool = 'cheap-module-eval-source-map'
} else {
// 生产环境配置
}
// Object.assign(config, { // 开发生产共同配置
// resolve: {
// alias: {
// '@': path.resolve(__dirname, './src'),
// '@c': path.resolve(__dirname, './src/components'),
// 'vue$': 'vue/dist/vue.esm.js'
// }
// }
// })
},
chainWebpack: config => {
// webpack链接API,用于生成和修改webapck配置,https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
if (debug) {
// 本地开发配置
} else {
// 生产开发配置
}
},
parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
pluginOptions: {
// 第三方插件配置
},
pwa: {
// 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
},
devServer: {
open: true,
host: 'localhost',
port: 8081,
https: false,
hotOnly: false,
proxy: {
// 配置跨域
'/api': {
target: 'http://localhost:5002/api/',
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
before: app => {
}
}
}