当使用vue-cli3进行vue项目搭建的时候，如果要配置webpack，需要创建vue.config.js，在这个文件里面里面进行配置
官网
module.exports = { // 部署生产环境和开发环境下的URL。 // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上 //例如 https://www.my-app.com/。如果应用被部署在一个子路径上， //你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 // https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。 //baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath //默认是"/"，也可以是""或"./"，即相对路径 //这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径 //相对路径的 publicPath 有一些使用上的限制。 //在以下情况下，应当避免使用相对 publicPath: //当使用基于 HTML5 history.pushState 的路由时； //当使用 pages 选项构建多页面应用时。 publicPath: process.env.NODE_ENV === "production" ? "./" : "/", // outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称 outputDir: "mycli3", //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后， //静态资源会放在这个文件夹下） assetsDir: "assets", //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 indexPath: "myIndex.html", //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。 //你可以通过将这个选项设为 false 来关闭文件名哈希。 //(false的时候就是让原来的文件名不改变) filenameHashing: false, //在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript //入口文件。其值应该是一个对象，对象的 key 是入口的名字 pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时， // template 中的 title 标签需要是 <title><%= //htmlWebpackPlugin.options.title %></title> title: 'Index Page', // 在这个页面中包含的块，默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时， // 模板会被推导为 `public/subpage.html` // 并且如果找不到的话，就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 subpage: 'src/subpage/main.js' } // 设置为 true 或 'warning' 时， //eslint-loader 会将 lint 错误输出为编译警告。默认情况下 //，警告仅仅会被输出到命令行，且不会使得编译失败。 //如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: //'default'。这会强制 eslint-loader 将 lint 错误输出为编译错误， //同时也意味着 lint 错误将会导致编译失败。 //设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误， //这意味着 lint 警告将会导致编译失败。 //你也可以通过设置让浏览器 overlay 同时显示警告和错误 // devServer: { // overlay: { // warnings: true, // errors: true // } //} lintOnSave: true, //如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置 // lintOnSave: process.env.NODE_ENV !== 'production', //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件 //中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false) runtimeCompiler: false, /** * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 * 打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件 * map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错， * 输出的错误信息无法准确得知是哪里的代码报错。 * 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 * */ productionSourceMap: false, // 它支持webPack-dev-server的所有选项 devServer: { host: "localhost", port: 1111, // 端口号 https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 // 配置多个代理 proxy: { "/api": { target: "<url>",// 要访问的接口域名 ws: true,// 是否启用websockets changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端， //然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的 //交互就不会有跨域问题 pathRewrite: { '^/api': '' //这里理解成用'/api'代替target里面的地址, //比如我要调用'http://40.00.100.100:3002/user/add'， //直接写'/api/user/add'即可 } }, "/foo": { target: "<other_url>" } } } }; //调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象 configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] } //如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函 // (该函数会在环境变量被设置之后懒执行)。 module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... } else { // 为开发环境修改配置... } } } //Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。 chainWebpack: (config) => { config.resolve.alias .set("@$", resolve("src")) .set("api", resolve("src/api")) .set("components", resolve("src/components")) .set("common", resolve("src/common")) .set("base", resolve("src/base")) .set("router", resolve("src/router")) .set("store", resolve("src/store")); }, //修改 Loader 选项 module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { // 修改它的选项... return options }) } } //添加一个新的 Loader module.exports = { chainWebpack: config => { // GraphQL Loader config.module .rule('graphql') .test(/\.graphql$/) .use('graphql-tag/loader') .loader('graphql-tag/loader') .end() // 你还可以再添加一个 loader .use('other-loader') .loader('other-loader') .end() } } //对于 CSS 相关 loader 来说，我们推荐使用 css.loaderOptions // 而不是直接链式指定 loader。 //替换一个规则里的 Loader module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg') // 清除已有的所有 loader。 // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。 svgRule.uses.clear() // 添加要替换的 loader svgRule .use('vue-svg-loader') .loader('vue-svg-loader') } } css.extract Default: 生产环境下是 true，开发环境下是 false 提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。 css.sourceMap 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能 css.loaderOptions 向 CSS 相关的 loader 传递选项。例如： css: { loaderOptions: { css: { // 这里的选项会传递给 css-loader }, postcss: { // 这里的选项会传递给 postcss-loader } } } Babel 所有的 Vue CLI 应用都使用 @vue/babel-preset-app， 它包含了 babel-preset-env、JSX 支持以及为最小化包体积优化过的配置 我们推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。