vue2 在vue.config.js里webpack基本配置项

"use strict";
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const WebpackBar = require("webpackbar");
const webpack = require("webpack");
function resolve(dir) {
  return path.join(__dirname, dir);
}
const port = 8080; // 端口
module.exports = {
  // 部署生产环境和开发环境下的URL。
  publicPath: "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称(要和baseurl的生产环境路径-致) (默认dist)
  outputDir: "dist",
  //用于放置生成的静态资源 (js、css、img、 fonts) 的; (项目打包之后，静态资源会放在这个文件夹下)
  assetsDir: "static",
  // 是否开启eslint保存检测，有效值: ture  false error
  lintOnSave: false,
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  productionSourceMap: false,
  runtimeCompiler: true,
  // webpack-dev-server 相关配置
  devServer: {
    host: "0.0.0.0",
    port: port,
    open: true,
    proxy: {
      "/api": {
        target: 'http://192.168.48.50:8800',
        changeorigin: true,
        pathRewrite: { "^/api": "api", },
      }
    },
    disableHostCheck: true,
  },
  css: {
    sourceMap: false,
    loaderOptions:
    {// 解决dart-sass导致的图标偶发性乱码
      sass: {
        sassOptions: { outputstyle: "expanded" },
        additionalData: `@import "@/assets/styles/theme.scss";`,
      },
    },
  },
  configureWebpack: config => {
    // config.name = name
    if (process.env.NODE_ENV !== "development") {
      return {
        // 删除 console 和 警告
        optimization: {
          minimizer: [new TerserPlugin({
            exclude: /node_modules/, terserOptions: {
              warnings: false,
              compress: {
                drop_console: true,
              },
            },
          }),
          ],
        },
        plugins: [
          // 打包进度显示
          new WebpackBar({
            name: 'xxx'
          }),

          new CompressionPlugin({
            test: /\.(js|css|html)?$/i,// 压缩文件格式
            filename: "[path].gz[query]",// 压缩后的文件名
            algorithm: "gzip",// 使用gzip压缩
            minRatio: 0.8, // 压缩率小于1才会压缩
            //压缩超过此大小的文件,以字节为单位
            threshold: 10240,
            //删除原始文件只保留压缩后的文件
            deleteOriginalAssets: false,


          }),
          // 打包忽略momentjs下的所有locale
          new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
        ]
      }
    }
  },
  chainWebpack: (config) => {
    //设置别名 alias可以配置快捷引用
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('@views', resolve('src/views'))
      .set('@utils', resolve('src/utils'))
      .delete('base') // 删掉指定的别名
    // 删除预加载
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');
//svg配置查看 https://www.jianshu.com/p/3accd17be50b
    config.module.rule('svg').exclude.add(resolve('./src/icons/icons')).end();
    config.module
      .rule('icons')
      .test(/\.svg$/) //添加匹配规则
      .include.add(resolve('./src/icons/svg')) //添加我们要处理的文件路径
      .end()  //上面的add方法改变了上下文，调用end()退回到include这一级
      .use('svg-sprite-loader') //使用"svg-sprite-loader"这个依赖
      .loader('svg-sprite-loader')//选中这个依赖
      .options({
        symbolId: 'icon-[name]', // 这个配置是这个包的配置不属于webpack，可以查看相关文档，symbolId指定我们使用svg图片的名字
      }).end(); //传入配置

    config.when(process.env.NODE_ENV !== "development", (config) => {
      // runtime 代码由于只是驱动不同路由页面的关系，代码量比较少，请求 js 的时间都大于执行时间了，
      // 所以使用 script-ext-html-webpack-plugin 插件将其内链在 index.html 中比较友好。
      // script-ext-html-webpack-plugin该插件需要在 html-webpack-plugin 插件初始化后运行，还需要安装 html-webpack-plugin
      config.plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /runtime\..*\.js$/
          }
        ])
        .end();
      config.optimization.minimize(true)// 开启压缩js代码
      // chunks资源分块
      // 如果使用了某些长期不会改变的库，像 element-ui 打包完成有600多KB 包含在默认vendor中显然不合适
      // 每次用户都要加载这么大的文件体验不好 所以要单独打包
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial' // only package third parties that are initially dependent
          },
          elementUI: {
            name: 'chunk-elementUI', // split elementUI into a single package
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          },
        },
      });
      //根据路由驱动页面的 runtime 代码默认情况是包含在 build 后的 app.hash.js 内的，如果我们改动其他路由，就会导致 runtime 代码改变。
      //从而不光我们改动的路由对应的页面 js 会变，含 runtime 代码的 app.hash.js 也会变，对用户体验是非常不友好的。
      //为了解决这个问题要设定 runtime 代码单独抽取打包：
      config.optimization.runtimeChunk("single"),
      {
        from: path.resolve(__dirname, "./public/robots.txt"),//防爬虫文件
        to: "./",
      };
    });
  },
};

 npm i -D compression-webpack-plugin@6.1.0 

 npm install script-ext-html-webpack-plugin -D

npm install html-webpack-plugin -D

 npm install webpackbar -D     

 npm run build打包后页面空白报错：Failed to load resource: net::ERR_FILE_NOT_FOUND

改vue.config.js中的publicPath: './',

这个问题解决后页面还是空白但是没有报错信息

是history路由问题
= 如果你在创建项目时选择了history路由模式，打开Router内的index.js，也就是默认路由的配置文件，把history一行注释掉：

const router = new VueRouter({
// mode: “history”,
base: process.env.BASE_URL,
routes
})

当路由开启history模式，打包的文件放到服务器会发现访问不到页面， 将mode:'history'注释重新打包即可 这里并不是说不能打开这个模式，这个模式需要后端设置的配合，详情可以看:不同的历史模式 | Vue Router