{"id":1092,"date":"2022-11-26T16:42:00","date_gmt":"2022-11-26T08:42:00","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=1092"},"modified":"2022-10-25T10:45:30","modified_gmt":"2022-10-25T02:45:30","slug":"vue%e4%bc%98%e5%8c%96-sourcemap%e4%b8%8e%e6%89%93%e5%8c%85%e7%94%9f%e4%ba%a7%e7%8e%af%e5%a2%83%e6%b8%85%e9%99%a4log","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=1092","title":{"rendered":"Vue\u4f18\u5316sourceMap\u4e0e\u751f\u4ea7\u73af\u5883\u6e05\u9664log"},"content":{"rendered":"\n

\u8bf4\u9053\u4f18\u5316\u8fd9\u4e2a\u8bdd\u9898 \u603b\u662f\u6709\u597d\u591a\u5207\u5165\u70b9\uff0c\u6bd4\u5982\uff1a<\/p>\n\n\n\n

\u7ec4\u4ef6\u61d2\u52a0\u8f7d\u3001\u8def\u7531\u61d2\u52a0\u8f7d\u3001\u5f00\u542fgzip\u3001\u516c\u5171\u7684\u7b2c\u4e09\u65b9\u5305\u4e0acdn\u3001\u8fd8\u6709\u57fa\u7840\u7684\u96c5\u864e35\u6761\u519b\u89c4\u4e00\u6761\u6761\u6392\u67e5\u7b49\u7b49\u3002<\/strong><\/p>\n\n\n\n

\u4eca\u5929\u8bf4\u70b9\u522b\u7684\uff0c\u76f4\u63a5\u4e0a\u6559\u7a0b\uff0c<\/p>\n\n\n\n

\u52a8\u624b\u6765\u641e~<\/p>\n\n\n\n

1\u3001\u5b89\u88c5 terser-webpack<\/a>-plugin<\/strong><\/p>\n\n\n\n

npm install terser-webpack-plugin --save-dev\n<\/code><\/pre>\n\n\n\n
2\u3001vue.config.js \u4e2d\u5f15\u5165<\/p>\n\n\n\n
const TerserPlugin = require('terser-webpack-plugin');\nmodule.exports = {\n\/\/\u751f\u4ea7\u73af\u5883\u662f\u4e0d\u9700\u8981sourceMap\u7684\uff0c\u5982\u4e0b\u914d\u7f6e\u53ef\u4ee5\u53bb\u9664\n\/\/\u95ee\u9898\uff1a vue\u9879\u76ee\u6253\u5305\u4e4b\u540ejs\u6587\u4ef6\u5939\u4e2d\uff0c\u4f1a\u81ea\u52a8\u751f\u6210\u4e00\u4e9bmap\u6587\u4ef6\uff0c\u5360\u7528\u76f8\u5f53\u4e00\u90e8\u5206\u7a7a\u95f4\n\/\/sourceMap\u8d44\u6e90\u6620\u5c04\u6587\u4ef6\uff0c\u5b58\u7684\u662f\u6253\u5305\u524d\u540e\u7684\u4ee3\u7801\u4f4d\u7f6e\uff0c\u65b9\u4fbf\u5f00\u53d1\u4f7f\u7528\uff0c\u8fd9\u4e2a\u5360\u7528\u76f8\u5f53\u4e00\u90e8\u5206\u7a7a\u95f4\u3002\n\/\/map\u6587\u4ef6\u7684\u4f5c\u7528\u5728\u4e8e\uff1a\u9879\u76ee\u6253\u5305\u540e\uff0c\u4ee3\u7801\u90fd\u662f\u7ecf\u8fc7\u538b\u7f29\u52a0\u5bc6\u7684\uff0c\u5982\u679c\u8fd0\u884c\u65f6\u62a5\u9519\uff0c\u8f93\u51fa\u7684\u9519\u8bef\u4fe1\u606f\u65e0\u6cd5\u51c6\u786e\u5f97\u77e5\u662f\u54ea\u91cc\u7684\u4ee3\u7801\u62a5\u9519\uff0c\u6709\u4e86map\u5c31\u53ef\u4ee5\u50cf\u672a\u52a0\u5bc6\u7684\u4ee3\u7801\u4e00\u6837\uff0c\u51c6\u786e\u7684\u8f93\u51fa\u662f\u54ea\u4e00\u884c\u54ea\u4e00\u5217\u6709\u9519\u3002\n  productionSourceMap:false,\/\/\u6e05\u9664sourceMap\uff08\u53ef\u4ee5\u51cf\u5c0f\u4e00\u534a\u5927\u5c0f\u5982\uff1a\u538b\u7f29\u53057M\uff0c\u4f7f\u7528\u540e3M\u591a\uff09\n\n  \/\/   \u6253\u5305\u540e\u7981\u6b62\u5728\u63a7\u5236\u53f0\u8f93\u51faconsole.log\n  configureWebpack: config => {\n    if (process.env.NODE_ENV === 'production') {\n      config.plugins.push(\n        new TerserPlugin({\n          terserOptions: {\n            warnings: false,\n            compress: {\n              drop_console: true,\n              drop_debugger: false,\n              pure_funcs: ['console.log'] \/\/ \u79fb\u9664console\n            }\n          },\n        }),\n      )\n    }\n  },\n}\n\n<\/code><\/pre>\n\n\n\n
npm install\uff08\u6309\u9700\u6267\u884c\uff0c\u5982\u679c\u53ef\u4ee5\u7528\u5c31\u4e0d\u9700\u8981\u518d\u6b21\u5b89\u88c5\uff09<\/p>\n\n\n\n
\u4ee5\u4e0a\u662f”@vue\/cli-service”: \u201c~5.0.0\u201d,<\/strong><\/p>\n\n\n\n
\u4e00\u5b9a\u8981\u67e5\u770b\u4e0b\u7248\u672c\uff0c\u522b\u5fd8\u4e86\uff0c<\/p>\n\n\n\n
\u5176\u5b83\u8001\u9879\u76ee”@vue\/cli-service”: \u201c~4.5.0\u201d,\u53ef\u4ee5\u6839\u636e\u9700\u8981\u6362\u7248\u672c<\/p>\n\n\n\n
\u5b89\u88c5<\/p>\n\n\n\n
npm install -D terser-webpack-plugin@4.2.3<\/code><\/pre>\n\n\n\n
\u5728webpack4 \u91cc\u8fb9\u786e\u5b9e\u9700\u8981 \u914d\u7f6e\u8fd9\u4e2a terser-webpack-plugin \u63d2\u4ef6\uff0c\u5728 webpack5 \u4e2d\u5df2\u7ecf\u9ed8\u8ba4\u914d\u7f6e\u597d\u4e86\uff08\u5177\u4f53\u53ef\u4ee5\u53bb\u770b\u6587\u6863\uff09\uff0c\u6240\u4ee5\uff0c\u671f\u5f85\u811a\u624b\u67b6\u914d\u7f6e webpack5 \u4e0a\u7ebf\u3002<\/p>\n\n\n\n
\u5b66\u4e60\u662f\u4e00\u4ef6\u75db\u82e6\u5e76\u5feb\u4e50\u7684\u4e8b\u60c5\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8bf4\u9053\u4f18\u5316\u8fd9\u4e2a\u8bdd\u9898 \u603b\u662f\u6709\u597d\u591a\u5207\u5165\u70b9\uff0c\u6bd4\u5982\uff1a \u7ec4\u4ef6\u61d2\u52a0\u8f7d\u3001\u8def\u7531\u61d2\u52a0\u8f7d\u3001\u5f00\u542fgzip\u3001\u516c\u5171\u7684\u7b2c\u4e09\u65b9\u5305\u4e0acdn\u3001\u8fd8\u6709 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,44],"tags":[38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1092"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1092"}],"version-history":[{"count":8,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1092\/revisions"}],"predecessor-version":[{"id":1118,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1092\/revisions\/1118"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1092"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}