{"id":2360,"date":"2020-01-11T16:08:37","date_gmt":"2020-01-11T08:08:37","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2360"},"modified":"2026-08-15T16:54:24","modified_gmt":"2026-08-15T08:54:24","slug":"vue%e9%a1%b9%e7%9b%ae%e9%83%a8%e7%bd%b2%e5%88%b0%e6%9c%8d%e5%8a%a1%e5%99%a8","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2360","title":{"rendered":"Vue\u9879\u76ee\u90e8\u7f72\u5230\u670d\u52a1\u5668"},"content":{"rendered":"
\n
\n
\n
\n
\n
\n
\n
\"\"<\/a><\/section>\n
\u201c<\/strong>\u00a0\u968f\u7740\u524d\u540e\u7aef\u5206\u79bb\u9879\u76ee\u7684\u6d41\u884c\uff0cvue\u9879\u76ee\u5f00\u53d1\u90e8\u7f72\u4e5f\u6210\u4e3a\u4e86\u524d\u7aef\u4eba\u5458\u5fc5\u5907\u6280\u80fd\uff1b\u672c\u6587\u5c06\u5e26\u4f60\u5b66\u4e60vue\u9879\u76ee\u90e8\u7f72\u53ca\u9047\u5230\u7684\u5404\u79cd\u5751\u3002\u201d<\/strong><\/section>\n<\/section>\n<\/section>\n<\/section>\n
\n
\n
\n
\"\"<\/section>\n
<\/section>\n<\/section>\n<\/section>\n<\/section>\n

\u5173\u4e8evue\u9879\u76ee\u90e8\u7f72\u4e0d\u5f97\u4e0d\u63d0\u7684\u662f\u914d\u7f6e\u6587\u4ef6vue.config.js<\/code>\u00a0\u3002<\/p>\n

\u6ce8\uff1a\u672c\u6587\u4f7f\u7528\u6700\u65b0vue3.0\u7248\u672c\uff0c\u5982\u679c\u4f60\u4f7f\u7528\u7684\u662fvue2.0\u914d\u7f6e\u65b9\u5f0f\u7565\u6709\u4e0d\u540c\u3002<\/p>\n

vue.config.js<\/code>\u00a0\u662f\u4e00\u4e2a\u53ef\u9009\u7684\u914d\u7f6e\u6587\u4ef6\uff0c\u5982\u679c\u9879\u76ee\u7684 (\u548c\u00a0package.json<\/code>\u00a0\u540c\u7ea7\u7684) \u6839\u76ee\u5f55\u4e2d\u5b58\u5728\u8fd9\u4e2a\u6587\u4ef6\uff0c\u90a3\u4e48\u5b83\u4f1a\u88ab\u81ea\u52a8\u52a0\u8f7d\u3002<\/p>\n

\n
\/\/ vue.config.js\n<\/span><\/span><\/code>module<\/span>.exports<\/span> = {<\/span><\/code>  \/\/ \u9009\u9879...<\/span><\/span><\/code>}<\/span><\/code><\/pre>\n<\/section>\n
\n
\n
\n
\n
\n<\/section>\n<\/section>\n<\/section>\n<\/section>\n
\u2014\u3001vue\u9879\u76ee\u90e8\u7f72\u5230\u6839\u8def\u5f84<\/p>\n
vue.config.js<\/code>\u9009\u9879\u00a0publicPath<\/code>\u7528\u4e8e\u914d\u7f6e\u00a0“\u90e8\u7f72\u5e94\u7528\u5305\u65f6\u7684\u57fa\u672c URL”\u3002<\/p>\n
\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cVue CLI \u4f1a\u5047\u8bbe\u4f60\u7684\u5e94\u7528\u662f\u88ab\u90e8\u7f72\u5728\u4e00\u4e2a\u57df\u540d\u7684\u6839\u8def\u5f84\u4e0a\uff0c\u4f8b\u5982\u00a0https:\/\/www.my-app.com\/<\/code>\u3002<\/p>\n
\u4e5f\u5c31\u662f\u5c06\u9879\u76ee\u90e8\u7f72\u5230\u57df\u540d\u6839\u8def\u5f84\u7684\u60c5\u51b5\u4e0b\u9009\u9879publicPath\u00a0<\/code>\u4f7f\u7528\u9ed8\u8ba4\u503c\u4e0d\u7528\u8bbe\u7f6e\u3002<\/p>\n
\n
module.exports = {<\/span><\/code> \n     \/\/ publicPath: '\/', \u90e8\u7f72\u9879\u76ee\u5230\u57df\u540d\u6839\u8def\u5f84\u7684\u60c5\u51b5\u4e0b\u9009\u9879publicPath\u4e0d\u7528\u8bbe\u7f6e\u3002<\/span><\/code> \n      outputDir: 'dist', \/\/ \u8f93\u51fa\u6587\u4ef6\u76ee\u5f55<\/span><\/code>  \n       assetsDir: 'assets', \/\/ \u9759\u6001\u8d44\u6e90\u76ee\u5f55 (js, css, img, fonts)<\/span><\/code>\u00a0\u00a0\u00a0\n       ...\n<\/span><\/code>}<\/span><\/code><\/pre>\n<\/section>\n
\u4ee5\u201c\u96e8\u679c\u5b66\u9662\u540e\u53f0\u7ba1\u7406\u4e2d\u5fc3\u201d\u9879\u76ee\u4e3a\u4f8b\uff0c<\/p>\n
    \n
  1. npm build<\/code>\u00a0\u6253\u5305\u5e94\u7528<\/li>\n
  2. \u5c06\u7f16\u8bd1\u5305\u62f7\u8d1d\u5230nginx\u670d\u52a1\u5668html\u76ee\u5f55\u4e0b<\/li>\n<\/ol>\n
    \n
    \u76ee\u5f55\uff1aD:\\nginx-1.17.7\\html<\/span><\/code>\/disk<\/span><\/code>50x.html<\/span><\/code>index.html<\/span><\/code><\/pre>\n<\/section>\n
    \u00a0 \u00a03.\u00a0 \u4fee\u6539nginx\u914d\u7f6e\u6587\u4ef6nginx.config<\/p>\n
    \n
     # D:\\nginx-1.17.7\\conf\\nginx.confg<\/span><\/code> \n     location \/ {<\/span><\/code>\u00a0\u00a0\u00a0\u00a0\n          #root\u00a0\u00a0\u00a0html;\u00a0  \u539f\u914d\u7f6e<\/span><\/code>\u00a0\u00a0\u00a0\u00a0\n           root\u00a0html\/dist;\u00a0#\u4fee\u6539\u540e\u914d\u7f6e<\/span><\/code>\u00a0\u00a0\u00a0\u00a0\n          index\u00a0\u00a0index.html\u00a0index.htm\n;<\/span><\/code>}<\/span><\/code><\/pre>\n<\/section>\n
    \u00a0 \u00a04. \u542f\u52a8nginx\u670d\u52a1<\/p>\n
    \u9879\u76ee\u6548\u679c\u5982\u4e0b:<\/p>\n
    \"11\"<\/p>\n<\/section>\n<\/section>\n<\/section>\n<\/section>\n
    \u00a0 5.\u00a0\u9047\u5230\u7684\u95ee\u9898<\/p>\n
    \u6211\u4eec\u77e5\u9053vue\u5355\u9875\u5e94\u7528\u6709\u4e24\u79cd\u52a0\u8f7d\u6a21\u5f0f\uff0c\u4e00\u79cd\u662f\u9ed8\u8ba4\u7684\u00a0hash\u00a0\u6a21\u5f0f,\u00a0\u4e00\u79cd\u662fhistory\u00a0\u6a21\u5f0f\uff0c\u4e3a\u4e86\u7f8e\u89c2\u8d77\u89c1\u6b63\u5f0f\u4e0a\u7ebf\u7684\u5e94\u7528\u4e2d\u90fd\u4f1a\u4f7f\u7528history\u6a21\u5f0f\u3002<\/p>\n
    \u5728history\u6a21\u5f0f\u4e0b\uff0c\u5f53\u5237\u65b0\u6d4f\u89c8\u5668\u65f6\u4f1a\u51fa\u73b0404\u9519\u8bef<\/p>\n
    \"22\"<\/a><\/p>\n
    \u89e3\u51b3\u65b9\u6cd5\u4fee\u6539nginx.config\u6587\u4ef6\uff0c\u6dfb\u52a0try_files $uri $uri\/ \/index.html;<\/span><\/p>\n
    \n
    location \/ {<\/span><\/code>      \n       root   html\/dist;<\/span><\/code>      \n       index  index.html index.htm;<\/span><\/code>      \n       try_files $uri $uri\/ \/index.html; #\u52a0\u4e0a\u8fd9\u53e5\u5373\u53ef\u4f7f\u7528history\u6a21\u5f0f\u8fdb\u884c\u8def\u7531<\/span><\/code>  \n}<\/span><\/code><\/pre>\n<\/section>\n
    \n
    \n
    \n
    \u4e8c\u3001\u9879\u76ee\u90e8\u7f72\u5230\u5b50\u8def\u5f84<\/p>\n
    \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cVue CLI \u4f1a\u5047\u8bbe\u4f60\u7684\u5e94\u7528\u662f\u88ab\u90e8\u7f72\u5728\u4e00\u4e2a\u57df\u540d\u7684\u6839\u8def\u5f84\u4e0a\uff0c\u4f8b\u5982\u00a0https:\/\/www.my-app.com\/<\/code>\u3002\u5982\u679c\u5e94\u7528\u88ab\u90e8\u7f72\u5728\u4e00\u4e2a\u5b50\u8def\u5f84\u4e0a\uff0c\u4f60\u5c31\u9700\u8981\u7528publicPath\u9009\u9879\u6307\u5b9a\u8fd9\u4e2a\u5b50\u8def\u5f84\u3002\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u7684\u5e94\u7528\u88ab\u90e8\u7f72\u5728\u00a0https:\/\/www.my-app.com\/my-app\/<\/code>\uff0c\u5219\u8bbe\u7f6e\u00a0publicPath<\/code>\u00a0\u4e3a\u00a0\/my-app\/<\/code>\u3002<\/p>\n<\/section>\n<\/section>\n<\/section>\n<\/section>\n
    1. vue.config.js\u914d\u7f6e<\/p>\n
    \n
    module.exports = {<\/span><\/code>  \n    publicPath: '\/my-app\/', \/\/\u8bbf\u95ee\u5b50\u76ee\u5f55:http:\/\/www.my-app.com\/myapp<\/span><\/code>  \n    outputDir: 'dist', \/\/ \u8f93\u51fa\u6587\u4ef6\u76ee\u5f55<\/span><\/code>  \n    assetsDir: 'assets', \/\/ \u9759\u6001\u8d44\u6e90\u76ee\u5f55 (js, css, img, fonts)<\/span><\/code>\u00a0\n}<\/span><\/code><\/pre>\n<\/section>\n
    \u00a0\u4e3a\u4e86\u5728\u5f00\u53d1\u73af\u5883\u65b9\u4fbf\u6d4b\u8bd5\u4e00\u822c\u5982\u4e0b\u914d\u7f6e<\/p>\n
    \n
    module.exports = {<\/span><\/code>  \n     publicPath: process.env.NODE_ENV === 'production' ? '\/my-app\/' : '\/', <\/span><\/code>  \n     outputDir: 'my-app', \/\/ \u8f93\u51fa\u6587\u4ef6\u76ee\u5f55<\/span><\/code>  \n     assetsDir: 'assets', \/\/ \u9759\u6001\u8d44\u6e90\u76ee\u5f55 (js, css, img, fonts)\n<\/span><\/code>}<\/span><\/code><\/pre>\n<\/section>\n
    2. \u8bb0\u5f97\u4fee\u6539\u8def\u5f84router.js<\/p>\n
    \n
    const router = new VueRouter({<\/span><\/code>\u00a0\u00a0\n      mode:\u00a0'history',\u00a0\/\/\u4f7f\u7528history\u6a21\u5f0f<\/span><\/code>  \n       base: '\/my-app\/',\/\/\u9ed8\u8ba4\u8def\u5f84process.env.BASE_URL,<\/span><\/code>  routes\n<\/span><\/code>})<\/span><\/code><\/pre>\n<\/section>\n
    3.\u00a0nginx.config\u914d\u7f6e<\/p>\n
    \n
    location \/ {<\/span><\/code>      \n      root   html;<\/span><\/code>      \n      index  index.html index.htm;<\/span><\/code>      \n      try_files $uri $uri\/ \/index.html; #\u52a0\u4e0a\u8fd9\u53e5\u5373\u53ef\u4f7f\u7528history\u6a21\u5f0f\u8fdb\u884c\u8def\u7531<\/span><\/code> \n}<\/span><\/code><\/pre>\n<\/section>\n
    \u4e09\u3001centos\u90e8\u7f72nodejs\u9879\u76ee<\/p>\n
    1. \u4e0b\u8f7dNode.js\u5b89\u88c5\u5305\u3002<\/p>\n
    \n
    wget https:\/\/nodejs.org\/dist\/v6.9.5\/node-v6.9.5-linux-x64.tar.xz<\/span><\/code><\/pre>\n<\/section>\n
    2.\u89e3\u538b\u6587\u4ef6<\/p>\n
    \n
    tar xvf node-v6.9.5-linux-x64.tar.xz<\/span><\/code><\/pre>\n<\/section>\n
    3. \u521b\u5efa\u8f6f\u94fe\u63a5\uff0c\u60a8\u5c31\u53ef\u4ee5\u5728\u4efb\u610f\u76ee\u5f55\u4e0b\u76f4\u63a5\u4f7f\u7528node\u548cnpm\u547d\u4ee4\u3002<\/p>\n
    \n
    ln -s \/root\/node-v6.9.5-linux-x64\/bin\/node \/usr\/local\/bin\/node<\/span><\/code>ln -s \/root\/node-v6.9.5-linux-x64\/bin\/npm \/usr\/local\/bin\/npm<\/span><\/code><\/pre>\n<\/section>\n
    4. \u67e5\u770bnode\u3001npm\u7248\u672c<\/p>\n
    \n
    node -v<\/span><\/code>npm -v<\/span><\/code><\/pre>\n<\/section>\n
    5.\u00a0\u4e3a\u4e86\u8ba9nodejs\u5728\u540e\u53f0\u8fd0\u884c\u6211\u4eec\u9700\u8981\u5b89\u88c5forever\u63d2\u4ef6<\/p>\n
    \u5168\u5c40\u5b89\u88c5forever<\/p>\n
    \n
     npm install forever -g<\/span><\/code><\/pre>\n<\/section>\n
    6.\u00a0\u8fdb\u5165\u9879\u76ee\u76ee\u5f55\uff0c\u8fd0\u884c<\/p>\n
    \n
    forever start .\/bin\/www<\/span><\/code><\/pre>\n<\/section>\n
    7.\u00a0\u67e5\u770bforever\u8fd0\u884c\u7684\u9879\u76ee<\/p>\n
    \n
    forever list<\/span><\/code><\/pre>\n<\/section>\n
    8.\u00a0\u505c\u6b62\u670d\u52a1<\/p>\n
    \n
    forever stop 12528<\/span><\/code><\/pre>\n<\/section>\n
    \n
    \n
    \n
    <\/section>\n<\/section>\n<\/section>\n<\/section>\n
    \u56db\u3001\u603b\u7ed3<\/p>\n
    \u672c\u6587\u4ecb\u7ecd\u4e86vue\u9879\u76ee\u5728history\u6a21\u5f0f\u4e0b\u6253\u5305\u90e8\u7f72\u7684\u8fc7\u7a0b\u53ca\u9047\u5230\u7684\u95ee\u9898\uff0c\u7136\u540e\u4ecb\u7ecd\u4e86nodejs\u540e\u53f0\u9879\u76ee\u5728centos\u4e0a\u7684\u5b89\u88c5\u8fd0\u884c\u3002\u5173\u4e8evue\u9879\u76ee\u90e8\u7f72\u7f51\u4e0a\u6709\u5f88\u591a\u4ecb\u7ecd\uff0c\u4e00\u4e9b\u662f\u5728vue2.0\u57fa\u7840\u4e0a\u4ecb\u7ecd\u7684\uff0c\u5927\u5bb6\u5728\u4f7f\u7528\u65f6\u4e00\u5b9a\u5c0f\u65f6\u3002\u66f4\u591avue\u914d\u7f6e\u5efa\u8bae\u5927\u5bb6\u53c2\u8003\u5b98\u65b9vue.config.js\u914d\u7f6e\u6587\u6863\uff0c\u5f88\u591a\u95ee\u9898\u90fd\u53ef\u4ee5\u627e\u5230\u7b54\u6848\u3002\u6bd4\u5982\u5173\u4e8epublicPath\u76f8\u5bf9\u8def\u5f84\u914d\u7f6e\u95ee\u9898\u5b98\u65b9\u63cf\u8ff0\uff1a<\/p>\n
    \n
    publicPath\u8fd9\u4e2a\u503c\u4e5f\u53ef\u4ee5\u88ab\u8bbe\u7f6e\u4e3a\u7a7a\u5b57\u7b26\u4e32 (''<\/span>) \u6216\u662f\u76f8\u5bf9\u8def\u5f84 ('.\/'<\/span>)\uff0c\u8fd9\u6837\u6240\u6709\u7684\u8d44\u6e90\u90fd\u4f1a\u88ab\u94fe\u63a5\u4e3a\u76f8\u5bf9\u8def\u5f84\uff0c\u8fd9\u6837\u6253\u51fa\u6765\u7684\u5305\u53ef\u4ee5\u88ab\u90e8\u7f72\u5728\u4efb\u610f\u8def\u5f84\uff0c\u4e5f\u53ef\u4ee5\u7528\u5728\u7c7b\u4f3c Cordova hybrid \u5e94\u7528\u7684\u6587\u4ef6\u7cfb\u7edf\u4e2d\u3002<\/span><\/code>\n<\/code>\u76f8\u5bf9 publicPath \u7684\u9650\u5236<\/span><\/code>\u76f8\u5bf9\u8def\u5f84\u7684 publicPath \u6709\u4e00\u4e9b\u4f7f\u7528\u4e0a\u7684\u9650\u5236\u3002\u5728\u4ee5\u4e0b\u60c5\u51b5\u4e0b\uff0c\u5e94\u5f53\u907f\u514d\u4f7f\u7528\u76f8\u5bf9 publicPath:<\/span><\/code>\u5f53\u4f7f\u7528\u57fa\u4e8e HTML5 history.pushState \u7684\u8def\u7531\u65f6\uff1b<\/span><\/code>\u5f53\u4f7f\u7528 pages \u9009\u9879\u6784\u5efa\u591a\u9875\u9762\u5e94\u7528\u65f6\u3002<\/span><\/code><\/pre>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
    \u201c\u00a0\u968f\u7740\u524d\u540e\u7aef\u5206\u79bb\u9879\u76ee\u7684\u6d41\u884c\uff0cvue\u9879\u76ee\u5f00\u53d1\u90e8\u7f72\u4e5f\u6210\u4e3a\u4e86\u524d\u7aef\u4eba\u5458\u5fc5\u5907\u6280\u80fd\uff1b\u672c\u6587\u5c06\u5e26\u4f60\u5b66\u4e60vue\u9879\u76ee\u90e8\u7f72\u53ca\u9047\u5230\u7684 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,105],"tags":[],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2360"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2360"}],"version-history":[{"count":4,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2360\/revisions"}],"predecessor-version":[{"id":3546,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2360\/revisions\/3546"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}