{"id":10006397,"date":"2022-09-05T13:14:34","date_gmt":"2022-09-05T05:14:34","guid":{"rendered":"https:\/\/ityet.com\/?p=10006397"},"modified":"2022-09-05T13:14:34","modified_gmt":"2022-09-05T05:14:34","slug":"%e4%b8%ba%e4%bb%80%e4%b9%88vue-config-js%e4%b8%ad%e4%bd%bf%e7%94%a8require%ef%bc%8c%e8%80%8cvite-config-js%e4%bd%bf%e7%94%a8-import","status":"publish","type":"post","link":"https:\/\/itmax.cn\/?p=10006397","title":{"rendered":"\u4e3a\u4ec0\u4e48vue.config.js\u4e2d\u4f7f\u7528require\uff0c\u800cvite.config.js\u4f7f\u7528 import?"},"content":{"rendered":"<p><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cFy\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cFC\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u5076\u7136\u4e00\u6b21\u53d1\u73b0\uff0c\u4ed6\u4eec\u4e24\u4e2a\u7684\u5f15\u5165\u6a21\u5757\u7684\u65b9\u5f0f\u4e0d\u4e00\u6837\uff0c\u5728\u597d\u5947\u5fc3\u7684\u9a71\u4f7f\u4e0b\uff0c\u4fbf\u5f00\u59cb\u4e00\u63a2\u7a76\u7adf\u3002<\/p>\n<h3>1\u3001vue.config\u65b9\u5f0f<\/h3>\n<p>\u6253\u5f00\u9879\u76ee\u7684package.json\uff0c\u627e\u5230 scripts\u4f4d\u7f6e\u3002<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cHy\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u627e\u5230 <strong>vue-cli-service<\/strong> \u547d\u4ee4\uff0c\u901a\u5e38\u547d\u4ee4\u90fd\u4f4d\u4e8e\u5f53\u524d\u9879\u76ee\u7684node_modules\u4e0b\u7684 .bin\u6587\u4ef6\u5939\u4e2d(\u5168\u5c40\u547d\u4ee4\u4e0d\u5728\u6b64\u5904)<\/p>\n<p><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cHF\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cHH\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u5728node_modules\u4e0b\u627e\u5230  @vue\/cli-service\/bin\/vue-cli-service.js<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cHI\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u6700\u91cd\u8981\u662f\u7ea2\u8272\u6846\u5185\u8bed\u53e5\u3002\u7ee7\u7eed\u5f80\u4e0b\u627e\u3002<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cHS\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>service.js\u6587\u4ef6\u6bd4\u8f83\u957f\uff0c\u91cd\u8981\u7684\u662f\u4e0b\u9762\u8fd9\u53e5\u3002<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cHU\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u6253\u5f00 loadFileConfig<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cHZ\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u8fd9\u4e2a\u6587\u4ef6\u5f88\u77ed\uff0c\u53ea\u670938\u884c\uff0c\u5374\u975e\u5e38\u91cd\u8981\u3002  <\/p>\n<p>\u5927\u610f\u662f\u9996\u5148\u53bb\u627e\u662f\u5426\u6709\u81ea\u5b9a\u4e49\u914d\u7f6e\u6587\u4ef6\u8def\u5f84\uff0c\u5982\u679c\u6709\uff0c\u5c31\u52a0\u8f7d\u81ea\u5b9a\u4e49\u914d\u7f6e\u6587\u4ef6\uff1b<br \/>\u5982\u679c\u6ca1\u6709\uff0c\u5c31\u7528\u9ed8\u8ba4\u7684 vue.config.xx\u3002<\/p>\n<p>\u627e\u5230\u914d\u7f6e\u6587\u4ef6\u540e\uff0c\u901a\u8fc7 <a href=\"https:\/\/link.segmentfault.com\/?enc=QTZGQtHnI0xxCa1ei%2FgRYw%3D%3D.W3xoWWFKGWQvUfSM%2B1tV1ELudCyznm18Sa1N6ODRn5mIuf%2FqvBsN0S3BWtWf7Dl6\" rel=\"nofollow\">is-file-esm<\/a> \u6a21\u5757\u6765\u5224\u65ad\u914d\u7f6e\u6587\u4ef6\u662f\u7528es\u6a21\u5757\u65b9\u5f0f\uff0c\u8fd8\u662f commonjs\u6a21\u5757\u65b9\u5f0f\u52a0\u8f7d\u3002<\/p>\n<p>\u800c is-file-esm\u5224\u65ad\u6ca1\u6709\u522b\u7684\u3002\u5c31\u662f\u901a\u8fc7nodejs\u5b98\u65b9\u5b9a\u4e49\u7684\u6587\u4ef6 <strong>\u62d3\u5c55\u540d<\/strong> \u548c package.json\u4e2d\u7684 <strong>type<\/strong> \u53bb\u5224\u65ad\u3002\u8fd9\u91cc\u611f\u5174\u8da3\uff0c\u53ef\u4ee5\u9605\u8bfbnodejs\u5b98\u65b9\u5bf9\u4e8e <a href=\"https:\/\/link.segmentfault.com\/?enc=MS9QFqblyubs34p2gX%2FhLA%3D%3D.1AEqqpk23TslIjlzdVxwDVkTrZwby4Mx6FGQoWYNcuoH%2FUKfkbXWWXutRCM1IqS2XcM%2BP0ldmV5jNsOc6YaDiw%3D%3D\" rel=\"nofollow\">commonjs<\/a> \u548c <a href=\"https:\/\/link.segmentfault.com\/?enc=PkqKImcND%2BnnXShocl54JQ%3D%3D.tl79oOxb6%2Fz6c%2FfEvJviaS1hQLWtQ4c%2F2cAMKZFbycIkF%2FsQ8h7sdRTdYu8AqhGFqIdrkP32K7C4VudKL3x74Q%3D%3D\" rel=\"nofollow\">esm<\/a> \u7684\u652f\u6301\u548c\u5b9a\u4e49\u3002<\/p>\n<p>is-file-esm\u6a21\u5757\u4f1a\u5148\u901a\u8fc7\u6587\u4ef6\u6269\u5c55\u540d\u5224\u65ad\uff0c<\/p>\n<pre><code>.mjs \u4e3aesm , \n.js, .cjs\u4e3acommonjs\u6a21\u5757\uff0c\n\n\u5982\u679c\u6ca1\u6709\u6269\u5c55\u540d\uff0c\u5219\u901a\u8fc7\u5224\u65adpackage.json\u7684type\u5224\u65ad\n&quot;type&quot;:&quot;module&quot;,   \u4e3aesm\uff0c\n&quot;type&quot;:&quot;commonjs&quot;,   \u4e3aesm\uff0c\n\n\u5982\u679c\u6269\u5c55\u540d\u548ctype\u540c\u65f6\u51fa\u73b0\uff0c\u5219\u6269\u5c55\u540d\u4f18\u5148\u7ea7\u9ad8\u3002<\/code><\/pre>\n<p>\u6240\u4ee5\uff0c\u5982\u679ctype\u6ca1\u6307\u5b9a\uff0cvue.config.js\u4ee5 js \u7ed3\u5c3e\uff0c\u90a3\u4e48\u52a0\u8f7d\u7684\u5c31\u662f commmonjs\uff0cvue.config.js\u662f\u4ee5 commonjs \u65b9\u5f0f\u542f\u52a8\uff0c\u6a21\u5757\u5f15\u5165\u53ea\u80fd\u7528 require\uff0c\u800c\u4e0d\u662fimport\uff0c\u5982\u679c\u6539\u6210import\uff0c\u5c31\u4f1a\u62a5\u9519.<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cJl\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u6211\u4eec\u53ef\u4ee5\u5c06\u6269\u5c55\u540d\u6362\u6210 .mjs\u8bd5\u8bd5 (\u540c\u6837\u53ef\u4ee5\u5728package.json\u4e2d\u6307\u5b9atype\uff0c\u6211\u4eec\u53ea\u662f\u6311\u4e00\u79cd\uff0c\u4f60\u6709\u5174\u8da3\uff0c\u53ef\u4ee5\u53bb\u8bd5\u8bd5)<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cJv\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cJG\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u542f\u52a8\u540e\uff0c\u53d1\u73b0import\u6b63\u5e38\u8bc6\u522b\uff0c\u4f46\u662f require\u6ca1\u6709\u88ab\u5b9a\u4e49\u3002\u8bf4\u660e vue.config.mjs\u662f\u4ee5 es\u6a21\u5757\u7684\u65b9\u5f0f\u542f\u52a8\u7684\u3002<\/p>\n<h3>2\u3001vite.config\u65b9\u5f0f<\/h3>\n<p>\u6253\u5f00\u9879\u76ee\u7684package.json\uff0c\u627e\u5230 scripts\u4f4d\u7f6e\u3002<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cJW\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u540c\u6837\uff0c\u627e\u5230 node_module\u4e0b\u7684 .bin \u76ee\u5f55<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cJ0\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cJ1\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u627e\u5230 vite\u6a21\u5757\u4e0b\u7684 bin.vite.js<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cKs\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cKv\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u518d\u627e\u5230dist\/node\/cli<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cKz\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u5728cli.js\u8fd9\u4e2a\u6587\u4ef6\u4e2d\uff0c\u627e\u5230 <strong>\/chunks\/dep-c9998dc6.js<\/strong>\uff08\u540d\u79f0\u53ef\u80fd\u7248\u672c\u4e0d\u540c\u4f1a\u53d8\uff0c\u4f46\u80af\u5b9a\u662f\u4f4d\u4e8e createServer \u4f4d\u7f6e\u5904\uff09<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cKM\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cKN\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u5728 dep-c9998dc6.js\u6587\u4ef6\u4e2d\uff0c\u627e\u5230  loadConfigFromFile\u65b9\u6cd5\u3002<br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cKP\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><br \/><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc2cKQ\" alt=\"image.png\" title=\"image.png\" loading=\"lazy\"><\/p>\n<p>\u53ef\u4ee5\u53d1\u73b0\uff0c\u8fd9\u91cc\u7684 isESM \u53d8\u91cf\uff0c\u5e76\u4e0d\u662f\u901a\u8fc7\u6a21\u5757\u53bb\u5224\u65ad\uff0c\u800c\u662f\u76f4\u63a5\u5728\u4ee3\u7801\u4e2d\u901a\u8fc7 package.json\u7684type\u6216\u8005 vite.config.xx \u7684\u6269\u5c55\u540d\u5224\u65ad\u7684\u3002\u53ea\u4e0d\u8fc7\u591a\u4e86\u4e2a\u989d\u5916\u7684ts, \u5982\u679c\u6269\u5c55\u540d\u662fts\uff0c\u5219\u4e5f\u662fes\u6a21\u5757\u3002<\/p>\n<p>\u5982\u679c\u914d\u7f6e\u6587\u4ef6\u662f vite.config.js\u3002\u90a3\u4e48isESM\u4e3afalse\uff0c userConfig \u4e3aundefined\uff0c \u4e4b\u540e\u6267\u884c <strong>bundleConfigFile<\/strong> \u65b9\u6cd5\u5c06 es\u6a21\u5757\u8f6c\u8bd1\u4e3a commonjs\u6a21\u5757(\u770b\u6ce8\u91ca)<\/p>\n<pre><code class=\"js\">\/\/ Bundle config file and transpile it to cjs using esbuild.\nconst bundled = await bundleConfigFile(resolvedPath);<\/code><\/pre>\n<p>\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\uff0cvite.config.js \u5373\u4f7f\u4e0d\u662f es \u6a21\u5757\uff0c\u4e5f\u53ef\u4ee5\u5728\u91cc\u9762\u4f7f\u7528import\u7684\u539f\u56e0\u3002\u56e0\u4e3a\u88ab\u8f6c\u8bd1\u4e86\u3002<\/p>\n<p>\u5f53\u7136\u4fee\u6539 vite.config.js \u4e3a vite.config.mjs\u4e5f\u662f\u53ef\u4ee5\u7684\u3002<\/p>\n<p>\u6700\u7ec8\u7ed3\u679c\u548c vue.config.js\u5927\u540c\u5c0f\u5f02\uff0c\u90fd\u662f\u5148\u5224\u65ad\u6a21\u5757\u7c7b\u578b\u540e\uff0c\u518d\u901a\u8fc7\u4e0d\u540c\u7684\u52a0\u8f7d\u5668\uff0c\u5c06\u5176\u52a0\u8f7d\u8fdb\u6765\u3002<\/p>\n<p><a href=\"https:\/\/segmentfault.com\/a\/1190000042432407\">https:\/\/segmentfault.com\/a\/1190000042432407<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5076\u7136\u4e00\u6b21\u53d1\u73b0\uff0c\u4ed6\u4eec\u4e24\u4e2a\u7684\u5f15\u5165\u6a21\u5757\u7684\u65b9\u5f0f\u4e0d\u4e00\u6837\uff0c\u5728\u597d\u5947\u5fc3\u7684\u9a71\u4f7f\u4e0b\uff0c\u4fbf\u5f00\u59cb\u4e00\u63a2\u7a76\u7adf\u3002 1\u3001vue.config\u65b9\u5f0f [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-10006397","post","type-post","status-publish","format-standard","hentry"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts\/10006397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10006397"}],"version-history":[{"count":0,"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts\/10006397\/revisions"}],"wp:attachment":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10006397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10006397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10006397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}