一、vue.config.js 配置
const CompressionPlugin = require("compression-webpack-plugin")
const JavaScriptObfuscator = require("webpack-obfuscator")
const obfuscatorFlag = false // 是否混淆加密
const path = require("path") function resolve(dir) { return path.join(__dirname, dir) } module.exports = { // 部署应用时的基本 URL // 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。 // 例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/ publicPath: process.env.NODE_ENV === "production" ? "/production/" : "/", // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为 outputDir: "/dist", // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 assetsDir: "/static", // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 indexPath: "/", // 默认在生成的静态资源文件名中包含 hash 以便更好的控制缓存。 filenameHashing: false, // "多页面"模式下。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字， // value 是：一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；或一个指定其 entry 的字符串。 pages: { index: { entry: "/src/main.js", // page 的入口 template: "/index.html", // 模板文件来源 filename: "index.html", // 在 dist/index.html 的输出 title: "主页 Index Page", // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> chunks: ["chunk-vendors", "chunk-common", "index"] // 在这个页面中包含的块，默认情况下会包含, 提取出来的通用 chunk 和 vendor chunk。 }, // 当使用只有入口的字符串格式时， // 模板会被推导为 `public/subpage.html` // 并且如果找不到的话，就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 subpage: "src/pages/main.js" }, // 是否在保存的时候使用 `eslint-loader` 进行检查。 // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader) lintOnSave: process.env.NODE_ENV !== "production", // 是否使用包含运行时编译器的 Vue 构建版本 runtimeCompiler: false, // 是否为生产环境构建生成 source map？，设为false打包时不生成.map文件, 以加速生产环境构建 productionSourceMap: false, // babel-loader 默认会跳过 node_modules 依赖。通过这个选项可以显式转译一个依赖。 // Babel 显式转译列表 transpileDependencies: [ /* string or regex */ "ansi-regex", "strip-ansi", "normalize-url", "prepend-http", "sort-keys" ], // 调整内部的 webpack 配置。 // 查阅 https://cli.vuejs.org/guide/webpack.html#simple-configuration // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。 // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。 configureWebpack: config => { // 生产and测试环境 const pluginsPro = [ new CompressionPlugin({ // 文件开启Gzip filename: "[path].gz[query]", algorithm: "gzip", test: new RegExp(`\\.(${["js", "css"].join("|")})$`), threshold: 8192, minRatio: 0.8 }) ] const pluginsObfuscator = [ new JavaScriptObfuscator( { rotateUnicodeArray: true, // 必须为true compact: true, // 紧凑 从输出混淆代码中删除换行符。 controlFlowFlattening: false, // 此选项极大地影响了运行速度降低1.5倍的性能。 启用代码控制流展平。控制流扁平化是源代码的结构转换，阻碍了程序理解。 controlFlowFlatteningThreshold: 0.8, deadCodeInjection: true, // 此选项大大增加了混淆代码的大小（最多200％） 此功能将随机的死代码块（即：不会执行的代码）添加到混淆输出中，从而使得更难以进行反向工程设计。 deadCodeInjectionThreshold: 0.5, debugProtection: true, // 调试保护 如果您打开开发者工具，可以冻结您的浏览器。 debugProtectionInterval: true, // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，这使得使用“开发人员工具”的其他功能变得更加困难。它是如何工作的？一个调用调试器的特殊代码;在整个混淆的源代码中反复插入。 disableConsoleOutput: true, // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。 domainLock: [], // 锁定混淆的源代码，使其仅在特定域和/或子域上运行。这使得有人只需复制并粘贴源代码并在别处运行就变得非常困难。多个域和子域可以将代码锁定到多个域或子域。例如，要锁定它以使代码仅在www.example.com上运行添加www.example.com，以使其在example.com的任何子域上运行，请使用.example.com。 identifierNamesGenerator: "hexadecimal", // 使用此选项可控制标识符（变量名称，函数名称等）的混淆方式。 identifiersPrefix: "", // 此选项使所有全局标识符都具有特定前缀。 inputFileName: "", log: false, renameGlobals: false, // 不要启动 通过声明启用全局变量和函数名称的混淆。 reservedNames: [], // 禁用模糊处理和生成标识符，这些标识符与传递的RegExp模式匹配。例如，如果添加^ someName，则混淆器将确保以someName开头的所有变量，函数名和函数参数都不会被破坏。 reservedStrings: [], // 禁用字符串文字的转换，字符串文字与传递的RegExp模式匹配。例如，如果添加^ some * string，则混淆器将确保以某些字符串开头的所有字符串都不会移动到`stringArray`。 rotateStringArray: true, // seed: 0, // 默认情况下（seed = 0），每次混淆代码时都会得到一个新结果（即：不同的变量名，插入stringArray的不同变量等）。如果需要可重复的结果，请将种子设置为特定的整数。 selfDefending: false, // 此选项使输出代码能够抵抗格式化和变量重命名。如果试图在混淆代码上使用JavaScript美化器，代码将不再起作用，使得理解和修改它变得更加困难。需要紧凑代码设置。 sourceMap: false, // 请确保不要上传嵌入了内嵌源代码的混淆源代码，因为它包含原始源代码。源映射可以帮助您调试混淆的Java Script源代码。如果您希望或需要在生产中进行调试，可以将单独的源映射文件上载到秘密位置，然后将浏览器指向该位置。 sourceMapBaseUrl: "", // 这会将源的源映射嵌入到混淆代码的结果中。如果您只想在计算机上进行本地调试，则非常有用。 sourceMapFileName: "", sourceMapMode: "separate", stringArray: true, // 将stringArray数组移位固定和随机（在代码混淆时生成）的位置。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。 stringArrayEncoding: false, // 此选项可能会略微降低脚本速度。使用Base64或RC4对stringArray的所有字符串文字进行编码，并插入一个特殊的函数，用于在运行时将其解码回来。 stringArrayThreshold: 0.5, // 您可以使用此设置调整字符串文字将插入stringArray的概率（从0到1）。此设置在大型代码库中很有用，因为对stringArray函数的重复调用会降低代码的速度。 target: "browser", // 您可以将混淆代码的目标环境设置为以下之一： Browser 、Browser No Eval 、Node 目前浏览器和节点的输出是相同的。 transformObjectKeys: false, // 转换（混淆）对象键。例如，此代码var a = {enabled：true};使用此选项进行模糊处理时，将隐藏已启用的对象键：var a = {};a [_0x2ae0 [（'0x0'）] = true;。 理想情况下与String Array设置一起使用。 unicodeEscapeSequence: true // 将所有字符串转换为其unicode表示形式。例如，字符串“Hello World！”将被转换为“'\ x48 \ x65 \ x6c \ x6c \ x6f \ x20 \ x57 \ x6f \ x72 \ x6c \ x64 \ x21”。 }, [] ) // ] // 开发环境 const pluginsDev = [] if ( (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") && !obfuscatorFlag ) { config.plugins = [...config.plugins, ...pluginsPro] } else if ( (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") && obfuscatorFlag ) { config.plugins = [...config.plugins, ...pluginsPro, ...pluginsObfuscator] } else { // 为开发环境修改配置... config.plugins = [...config.plugins, ...pluginsDev] } config.resolve = { // 配置解析别名 extensions: [".js", ".json", ".vue"], alias: { "@": path.resolve(__dirname, "./src"), components: path.resolve(__dirname, "./src/components") } } }, // 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作)。 chainWebpack: config => { // 移除 prefetch 插件 config.plugins.delete("prefetch") // 这里是对环境的配置，不同环境对应不同的BASE_URL，以便axios的请求地址不同 // config.plugin('define').tap((args) => { // args[0]['process.env'].VUE_APP_BASE_URL = JSON.stringify(process.env.VUE_APP_BASE_URL); // return args; // }); }, // CSS 相关选项 css: { // 当为true时，css文件名可省略 module 默认为 false modules: true, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS // 默认生产环境下是 true，开发环境下是 false extract: false, // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能 sourceMap: false, //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader) loaderOptions: { less: { // 配置less（iview更改主题 less报错） javascriptEnabled: true // 设置为true } } }, // 配置 webpack-dev-server 行为。 // 本地配置 devServer: { host: "localhost", port: 8080, open: true, hotOnly: true, proxy: { "/api/instruction-server": { target: "http://192.168.1.xx:xxxx", changeOrigin: true, pathRewrite: { "^/api/instruction-server": "/instruction-server" } }, "/api": { target: "http://192.168.1.xx:xxxx", changeOrigin: true, pathRewrite: { "^/api": "" } }, "/webSw": { target: "ws://192.168.1.xx:xxxx", ws: true, changeOrigin: true, pathRewrite: { "^/webSw": "" } } } }, // 传递给 PWA 插件的选项。 // 查阅 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-pwa pwa: {}, // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader` // 在多核机器下会默认开启。 parallel: require("os").cpus().length > 1, // 三方插件的选项 pluginOptions: { // ... } }