vue.config.js —— vue/cli 3 脚手架的 webpack 配置文件

vue/cli 3 的脚手架去掉了vue-cli 2 的 webpack.dev.config.js 的 webpack 配置文件，如果想要在 vue/cli3 中配置 webpack，就需要在项目的根目录下添加 vue.config.js 配置文件。下面将重点介绍：devServer

devServer:

前端在vue-cli项目开发中，启动脚手架后，默认访问地址为 http://localhost:8080，

如果这时候要请求一个获取商品列表的接口，请求接口的地址为(举例)：https://huodong.fanli.com/h5/activity86415/getProductList， 就存在跨域问题。

解决：

vue-cli 3脚手架为我们提供了 devServe 的本地服务器，用于本地开发时解决一系列配置问题。包括：跨域（域名、端口号）、热启动、重写等等。

const proxy = require('http-proxy-middleware');

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8081,
        open: true,
        proxy: {
            '/activity86415': {
                target: 'https://huodong.fanli.com/h5/activity86415',
                changeOrigin: true,
                pathRewrite: {
                    '^/activity86415': '/'
                }
            }
        },
        open: true,
        hot: true,
        hotOnly: false,
    }
};

配置devServer 后，接口调用为：

至此，本地开发调用的接口地址为：

http://localhost:8081/activity86415/getProductList

如果这个时候直接打包放在测试服务器，会发现接口请求居然变为了：https://activity86415/getProductList，而我们真实的接口请求地址为：https://huodong.fanli.com/h5/activity86415/getProductList，这显然是行不通的。

这个时候就需要封装 axios 请求（或者直接在main.js中设置axios请求的根路径）：

if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'huodong.fanli.com/h5'
}

至于axios请求的根路径，也可以在项目的根目录下添加 .env 文件：

NODE_ENV=production
BASE_URL=/huodong.fanli.com/h5

然后 axios 改为：

if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = process.env.NODE_ENV.BASE_URL

现在打包后，调用的接口地址为：

https://huodong.fanli.com/h5/activity86415/getProductList

open: true
在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页

hot:true,     
hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。

hotOnly: false,   
 hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败

vue.config.js 常用配置：

const proxy = require('http-proxy-middleware');

module.exports = {
    // 基本路径，默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
    publicPath:
        process.env.NODE_ENV === "production"
            ? "/Public/activity86415/dist/"
            : "/",
    // 输出文件目录
    outputDir: 'dist',

    assetsDir:'static',
    indexPath:'index.html',
    
    productionSourceMap: false,
    
    lintOnSave: true, // eslint-loader 是否在保存的时候检查

    css: {
        extract: true, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 开启 CSS source maps?
        loaderOptions: {
            less: {
                javascriptEnabled: true,
                prependData: `@import "./src/common/css/global/less"`;
            },
        },
    },
    chainWebpack: config => {
        config
        .plugin('html')
        .tap(args => {
        args[0].title= '惊喜礼盒'
            return args
        })
    },
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/activity86415': {
                target: 'https://huodong.fanli.com/h5/activity86415',
                changeOrigin: true,
                pathRewrite: {
                    '^/activity86415': '/'
                }
            }
        },
        open: true,
        hot: true,
        hotOnly: false,
        before: app => {}
    },

    // 第三方插件配置
    pluginOptions: {}

};

=======================

 关于vue-cli2，vue/cli3 的区别，这里引用一下网上一位大神的文章，写的很详细：

vue-cli2、vue-cli3脚手架详细讲解 - じ★ve花之谷 - 博客园https://www.cnblogs.com/zhangchunping/p/15045033.html