8. 打包配置

超级管理员 1 597

注意：新版 vue-admin-beautiful 为了便于静态演示，所以打包时默认集成了 mock，如果不需要请找到src/main.js注释掉 mock 引入

如何打包

注意：打包前，务必配置打包后的要调用的 api 接口地址已经配置成功，在src/config/settings.js中配置，一般打包部署分为三种种情况：
1、nigix 代理：那你只要在src/config/settings.js配置接口后缀就可以啦，通过 nginx 代理转发
2、传统前后端分离部署：那你需要在src/config/settings.js配置接口地址包含请求协议与端口号，如http://192.168.1.59:8080/api
3、前后端部署到一起：那你需要在src/config/settings.js配置接口地址为空即可，如``

cnpm run build

修复 vue/cli4 热更新失效

module.exports = {
  chainWebpack(config) {
    config.resolve.symlinks(true);
  },
};

开启 gzip 压缩

cnpm i -S compression-webpack-plugin

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["html", "js", "css", "svg"];
module.exports = {
  chainWebpack(config) {
    config
      .plugin("compression")
      .use(CompressionWebpackPlugin, [
        {
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 8192,
          minRatio: 0.8,
        },
      ])
      .end();
  },
};

开启 Zopfli 压缩

cnpm i -S compression-webpack-plugin @gfx/zopfli brotli-webpack-plugin
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const BrotliPlugin = require("brotli-webpack-plugin");
const zopfli = require("@gfx/zopfli");
const productionGzipExtensions = ["html", "js", "css", "svg"];
module.exports = {
  chainWebpack(config) {
    config
      .plugin("compression")
      .use(CompressionWebpackPlugin, [
        {
          algorithm(input, compressionOptions, callback) {
            return zopfli.gzip(input, compressionOptions, callback);
          },
          compressionOptions: {
            numiterations: 15,
          },
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          minRatio: 0.8,
        },
      ])
      .end();
    config
      .plugin("brotli")
      .use(BrotliPlugin, [
        {
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          minRatio: 0.8,
        },
      ])
      .end();
  },
};

注入 sass 全局变量

module.exports = {
  css: {
    requireModuleExtension: true,
    sourceMap: true,
    loaderOptions: {
      scss: {
        /*sass-loader 7.0写法 */
        //data: '@import "~@/styles/variables.scss";',

        /*sass-loader 8.0写法 */
        //prependData: '@import "~@/styles/variables.scss";',

        /*sass-loader 9.0写法*/
        additionalData(content, loaderContext) {
          const { resourcePath, rootContext } = loaderContext;
          const relativePath = path.relative(rootContext, resourcePath);
          if (
            relativePath.replace(/\\/g, "/") !== "src/styles/variables.scss"
          ) {
            return '@import "~@/styles/variables.scss";' + content;
          }
          return content;
        },
      },
    },
  },
};

开启 eslint 自动校验

module.exports = {
  lintOnSave: true,
};

关于图片存放位置的问题

module.exports = {
  assetsDir: "static",
};

把项目用的所有图片都放到src/assets文件夹下，图片引用直接require("@/assets/文件夹/图片")即可，图片会自动加密并编译到 static 目录。

 

 

 

章节目录