vue2项目配置“代理”、“端口”、“打包名”、“使用@”、“图片压缩”

前言

我们在搭建vue2项目的时候不可避免的会遇到“代理”、“端口”、“打包名”、“使用@”、“图片压缩”等配置问题，本文逐一讲述该怎么样在index.js和webpack.base.conf.js中去配置。

---

一、配置端口、代理转发

首先找到config目录下的index.js，按下面的注释提示配置

module.exports = {
    dev: {
        // 代理
        proxyTable: {
            '/api': {
                target: 'http://117.62.22.235:17009', // 目标地址
                changeOrigin: true,
                secure: true,
                pathRewrite: {
                    '^/api': '' // 将多出来的公共请求头设置为空
                }
            }
        },
        host: '10.9.10.13', // 启动ip地址，也可以是localhost
        port: 8080, // 启动端口
    }
}

二、修改打包名

还是在index.js中按注释提示配置

'use strict'
const path = require('path')

module.exports = {

    build: {
        index: path.resolve(__dirname, '../wxkjOffcialPcDist/index.html'), // 打包后项目入口文件地址
        assetsRoot: path.resolve(__dirname, '../wxkjOffcialPcDist'), // 打包后包名、路径
    }
}

三、使用@

module.exports = {
    // 路径使用@
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
        }
    }
}

四、图片压缩

图片压缩控件为image-webpack-loader，在引入它之前必须先引入file-loader

命令1：npm i -D file-loader

命令2：npm install image-webpack-loader --save-dev

然后打开build文件夹下的webpack.base.conf.js，按注释提示配置完毕后执行npm run build即可

module.exports = {
    module: {
        rules: [
            // 图片压缩（注意：image-webpack-loader要放在file-loader的后面，顺序不能倒，先执行image-webpack-loader进行图片的优化后再通过file-loader save到指定的目录下。）
            {
                test: /\.(png|jpg|gif)$/,
                loader: [
                    'file-loader?name=[name].[hash:7].[ext]&outputPath=images/',
                    'image-webpack-loader'
                ]
            }
        ]
    }
}

---

总结

这里都是代码片段，注释已标好，可以直接复制，亲测有效，找到对应的位置添加上即可。关于vue3的配置可以参考https://mp.csdn.net/mp_blog/creation/editor/131852773  https://mp.csdn.net/mp_blog/creation/editor/131855685