{"id":720,"date":"2018-06-27T11:35:50","date_gmt":"2018-06-27T03:35:50","guid":{"rendered":"http:\/\/loveuhouse.cn\/wordpress\/?p=720"},"modified":"2018-06-27T11:35:50","modified_gmt":"2018-06-27T03:35:50","slug":"vue-cli%e8%b5%84%e6%ba%90%e8%b7%af%e5%be%84%e9%97%ae%e9%a2%98webpack","status":"publish","type":"post","link":"https:\/\/loveuhouse.cn\/wordpress\/?p=720","title":{"rendered":"vue-cli\u8d44\u6e90\u8def\u5f84\u95ee\u9898(webpack)"},"content":{"rendered":"

\u6765\u6e90\uff1ahttps:\/\/blog.csdn.net\/w1170375057\/article\/details\/79036694
\n\u5173\u4e8e\u5728vue\u9879\u76ee\u4e2d\u8d44\u6e90\u8def\u5f84\u95ee\u9898
\n\u5728\u5199vue\u9879\u76ee\u65f6\u5f80\u5f80\u9762\u4e34\u8fd9\u4e9b\u95ee\u9898
\n1. \u56fe\u7247\u5f15\u5165\u4f7f\u7528\u7edd\u5bf9\u8def\u5f84\uff0c\u4e0d\u4f1a\u7ecf\u8fc7\u7f16\u8bd1\uff0c\u5c0f\u56fe\u7247\u4e0d\u4f1a\u7f16\u8bd1\u6210base64\u5f62\u5f0f
\n2. \u6253\u5305\u4e4b\u540e\u7684\u6587\u4ef6\uff0c\u5168\u90e8\u4f7f\u7528\u7edd\u5bf9\u8def\u5f84\uff0c\u90e8\u7f72\u65f6\u5e26\u6765\u5927\u91cf\u8def\u5f84\u95ee\u9898
\n\u5176\u5b9e\u8fd9\u4e9b\u95ee\u9898\u90fd\u53ef\u4ee5\u901a\u8fc7\u5bf9webpack\u7684\u914d\u7f6e\u6587\u4ef6\u8fdb\u884c\u66f4\u6539\u6765\u89e3\u51b3<\/p>\n

\u8d44\u6e90\u8def\u5f84
\n\u5728\u5f15\u5165\u8d44\u6e90\u65f6\u4f7f\u7528\uff0c\u522b\u540dalias\uff0cvue init webpack\u751f\u6210\u7684\u9879\u76ee\u5728build\/webpack.base.conf.js\u6587\u4ef6\u4e2d\u8fdb\u884c\u66f4\u6539
\n <\/p>\n

\n    alias: {\n        'vue$': 'vue\/dist\/vue.esm.js', \/\/ \u9ed8\u8ba4\u7684\n        '@': resolve('src'),  \/\/ \u9ed8\u8ba4\u7684\n        'assets': resolve('src\/assets')  \/\/ \u81ea\u5df1\u5b9a\u4e49\u7684\n    }\n<\/pre>\n
<\/code><\/p>\n
\u4e4b\u540e\u518d\u9879\u76ee\u4e2d\u5c31\u53ef\u4ee5\u4f7f\u7528\u4e86
\n    <\/p>\n
\n img src=\"~assets\/images\/[\u56fe\u7247\u540d]\"> \/\/ images: src\/assets \u4e0b\u5b58\u653e\u56fe\u7247\u7684\u6587\u4ef6\u5939 \n<\/pre>\n
<\/code>
\nbackgroud: url(~assets\/images\/[\u56fe\u7247\u540d])
\njs\u4e2d \u76f4\u63a5\u7528 assets\/...\uff0c\u4e0d\u9700\u8981\u52a0 ~<\/p>\n
\u6253\u5305 build\u65f6
\n\u6253\u5305\u65f6\uff0c\u53ef\u4ee5\u5c06\u8def\u5f84\u5168\u90e8\u6539\u6210\u76f8\u5bf9\u8def\u5f84\uff0c\u4e2a\u4eba\u8ba4\u4e3a\u6709\u5229\u4e8e\u90e8\u7f72\uff0c\u4ee5\u4e0b\u914d\u7f6e\u4e3a\u5728\u4f7f\u7528\u4e0a\u4e00\u6761\u914d\u7f6e\u7684\u60c5\u51b5\u4e0b\u8fdb\u884c
\n1. \u4fee\u6539config\/index.js\u6587\u4ef6\u4e2dbuild\u5bf9\u8c61\u4e2d\u7684
\n    <\/p>\n
\nassetsPublicPath: '\/'  \/\/ \u6539\u4e3a\uff1a \nassetsPublicPath: '.\/'\n<\/pre>\n
<\/code>
\n\u4fee\u6539build\/utils.js, \u9488\u5bf9css\u6837\u5f0f\u6587\u4ef6\uff0c\u56e0\u4e3a\u5728\u4f7f\u7528\u522b\u540d\u7684\u60c5\u51b5\u4e0b\uff0c\u6253\u5305\u51fa\u6765\u7684css\u6587\u4ef6\u4e2d\u8d44\u6e90\u6587\u4ef6\u7684\u5f15\u5165\u65b9\u5f0f\u4e3a static\/*
\n    <\/p>\n
\n\/\/ Extract CSS when that option is specified\n\/\/ (which is the case during production build)\n\/\/if (options.extract) {\n\/\/  return ExtractTextPlugin.extract({\n\/\/    use: loaders,\n\/\/    fallback: 'vue-style-loader'\n\/\/  })\n\/\/} else {\n\/\/  return ['vue-style-loader'].concat(loaders)\n\/\/}\n\/\/ \u65b0\u589e\u4e00\u6761\u5c5e\u6027publicPath\n\/\/ publicPath (\u6253\u5305\u65f6\u6539\u7528\u76f8\u5bf9\u8def\u5f84\uff0c\u5728static\/*\u524d\u9762\u52a0\u4e0apublicPath)\nif (options.extract) {\n  return ExtractTextPlugin.extract({\n    use: loaders,\n    fallback: 'vue-style-loader',\n    publicPath: '..\/..\/'\n  })\n} else {\n  return ['vue-style-loader'].concat(loaders)\n}\n\n<\/pre>\n
<\/code><\/p>\n
\u6b22\u8fce\u5927\u5bb6\u6307\u51fa\u95ee\u9898\uff0c\u4e00\u8d77\u4ea4\u6d41\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6765\u6e90\uff1ahttps:\/\/blog.csdn.net\/w1170375057\/article\/details\/79 … \u7ee7\u7eed\u9605\u8bfbvue-cli\u8d44\u6e90\u8def\u5f84\u95ee\u9898(webpack)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[25],"tags":[],"_links":{"self":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/720"}],"collection":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=720"}],"version-history":[{"count":1,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/720\/revisions"}],"predecessor-version":[{"id":721,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/720\/revisions\/721"}],"wp:attachment":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}