vue2打包配置

webpack构建流程

1、entry
2、module
3、module.rules的所有loader
4、chunk
5、plugin

webpack配置的解释

entry：模块入口，使得源文件加入到构建流程中
output：配置如何输出到最终的
module：配置各种类型的模块的处理规则
plugin：配置扩展插件
devServer：实现本地服务：包括http、模块热替换、source map等服务

安装

npm i terser-webpack-plugin --save-dev
npm i compression-webpack-plugin --save-dev

#### vue.config.js
const { defineConfig } = require('@vue/cli-service');
const TerserPlugin = require("terser-webpack-plugin");// webpack混淆插件
const CompressionWebpackPlugin = require('compression-webpack-plugin') // gzip压缩插件

const isProduction = process.env.NODE_ENV === 'production'
let plugins = [];
let externals = {
    // '你import form的东西': 'CDN向外暴露的对象名'
};
let cdn = {
    build:{
        js:[
            "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js",
            "https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
            'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js',
            'https://unpkg.com/vue-router@3.6.5/dist/vue-router.min.js',
        ]
    },
    dev:{
        js:[],
        css:[]
    }
}
// 是生产环境
if (isProduction) {
    // CDN优化 不处理，而是全局使用右边的名字遍历
    externals = {
        vue:'Vue',
        'vue-router':'VueRouter',
        axios:'axios',
        vuex:'Vuex'
    }
    // 压缩混淆
    plugins.push(new TerserPlugin({
        terserOptions: {
            output: {
                comments: false, // 去除注释
            },
            warnings: false, // 去除黄色警告,
            compress: {
                drop_console: true, // 去否去除console
                drop_debugger: true, // 特定情况需要利用debugger防止调试
                pure_funcs: ['console.log'], // 移除console.log 避免console.error
            }
        }
    }))
    // Gzip压缩大于10kb以上的js|json|css文件
    plugins.push(new CompressionWebpackPlugin({
        test:/\.(js|json|css)$/i,  // 图片一般不Gzip压缩 webpack-image-loader
        threshold:10240, // 只有在10kb以上才压缩
    }))
}
module.exports = {
    ...defineConfig({
        transpileDependencies: true
    }),
    productionSourceMap:!isProduction,// 打包后时候生成map文件，正式环境下不生成
    configureWebpack: {
        devServer: {
            // open: true,
            // host: '127.0.0.1',
            proxy: {
                '/api': {
                    logLevel: 'debug',
                    // "@vue/cli-service": "~5.0.0",
                    logProvider:()=>console,
                    target: 'http://1.116.64.64:5004/',
                }
            }
        },
        plugins,
        externals
    },
    // 再加工
    chainWebpack(config){
        // 去除html-webpack-plugin
        config.plugin('html').tap(args=>{
            // 只是处理一个html=>index.html
            if (isProduction) {
                args[0].myCdn = cdn.build;
            } else {
                args[0].myCdn = cdn.dev;
            }
            return args;
        })
    }
}

nginx

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;


    # Gzip压缩
    #是否启动gzip压缩
    gzip on;
    # 优先.gz文件 直接发.gz文件
    gzip_static on;
    #需要压缩的常见静态资源
    gzip_types text/plain application/javascript   application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    
    #由于nginx的压缩发生在浏览器端而微软的ie6很坑爹,会导致压缩后图片看不见所以该选
    #项是禁止ie6发生压缩
    gzip_disable "MSIE [1-6]\.";
    #如果文件大于1k就启动压缩
    gzip_min_length 1k;  
    #以16k为单位,按照原始数据的大小以4倍的方式申请内存空间,一般此项不要修改
    gzip_buffers 4 16k;
    #压缩的等级,数字选择范围是1-9,数字越小压缩的速度越快,消耗cpu就越大
    gzip_comp_level 2;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        # 代理配置
        location /api/ {
            proxy_pass http://1.116.64.64:5004/api/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}