Site updated: 2022-11-09 10:55:07
This commit is contained in:
qinglong
@ -11,7 +11,7 @@
|
||||
"url": "https://blog.jingxiyuan.cn/2022/11/09/Vue%E9%A1%B9%E7%9B%AE%E6%8C%89%E7%8E%AF%E5%A2%83%E8%AE%BE%E7%BD%AE%E7%BC%96%E8%AF%91%E9%A1%B9%E7%9B%AE/",
|
||||
"title": "Vue项目按环境设置编译项目",
|
||||
"date_published": "2022-11-09T01:47:00.000Z",
|
||||
"content_html": "<h4 id=\"引言\"><a class=\"anchor\" href=\"#引言\">#</a> 引言</h4>\n<ul>\n<li>今天在部署 vue 项目时发现生产环境的端口只有一个，而且被多个项目公用了，刚好此项目又没有配置服务名而是直接使用的根路径。没办法只有修改项目配置重新编译了！</li>\n</ul>\n<h4 id=\"配置\"><a class=\"anchor\" href=\"#配置\">#</a> 配置</h4>\n<ul>\n<li>在项目根目录添加两个文件。</li>\n</ul>\n<p><span class=\"blue\">.env.alpha</span></p>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>NODE_ENV = 'production'</pre></td></tr><tr><td data-num=\"2\"></td><td><pre>VUE_APP_BASE_URL = '/'</pre></td></tr></table></figure><p><span class=\"blue\">.env.prod</span></p>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>NODE_ENV = 'production'</pre></td></tr><tr><td data-num=\"2\"></td><td><pre>VUE_APP_BASE_URL = '/projectName'</pre></td></tr></table></figure><ul>\n<li>在<span class=\"label success\"> package.json</span> 文件内添加不同环境的打包指令</li>\n</ul>\n<figure class=\"highlight json\"><figcaption data-lang=\"JSON\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token property\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token property\">\"serve\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service serve\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token property\">\"build\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service build\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token property\">\"build-test\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service build --mode alpha\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token property\">\"build-prod\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service build --mode prod\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token property\">\"lint\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service lint\"</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><ul>\n<li>\n<p>项目中<span class=\"yellow\"> base_url</span> 需要使用<span class=\"red\"> process.env.VUE_APP_BASE_URL</span> 替换</p>\n</li>\n<li>\n<p>使用命令</p>\n</li>\n</ul>\n<figure class=\"highlight bash\"><figcaption data-lang=\"bash\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token function\">yarn</span> build-test</pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token function\">yarn</span> build-prod</pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token function\">yarn</span> build <span class=\"token parameter variable\">--mode</span> alpha</pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token function\">yarn</span> build <span class=\"token parameter variable\">--mode</span> prod</pre></td></tr></table></figure>",
|
||||
"content_html": "<h4 id=\"引言\"><a class=\"anchor\" href=\"#引言\">#</a> 引言</h4>\n<ul>\n<li>今天在部署 vue 项目时发现生产环境的端口只有一个，而且被多个项目公用了，刚好此项目又没有配置服务名而是直接使用的根路径。没办法只有修改项目配置重新编译了！</li>\n</ul>\n<h4 id=\"配置\"><a class=\"anchor\" href=\"#配置\">#</a> 配置</h4>\n<ul>\n<li>在项目根目录添加两个文件。</li>\n</ul>\n<p><span class=\"blue\">.env.alpha</span></p>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>NODE_ENV = 'production'</pre></td></tr><tr><td data-num=\"2\"></td><td><pre>VUE_APP_BASE_URL = '/'</pre></td></tr></table></figure><p><span class=\"blue\">.env.prod</span></p>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>NODE_ENV = 'production'</pre></td></tr><tr><td data-num=\"2\"></td><td><pre>VUE_APP_BASE_URL = '/projectName'</pre></td></tr></table></figure><ul>\n<li>在<span class=\"label success\"> package.json</span> 文件内添加不同环境的打包指令</li>\n</ul>\n<figure class=\"highlight json\"><figcaption data-lang=\"JSON\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token property\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token property\">\"serve\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service serve\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token property\">\"build\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service build\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token property\">\"build-test\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service build --mode alpha\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token property\">\"build-prod\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service build --mode prod\"</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token property\">\"lint\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"vue-cli-service lint\"</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><ul>\n<li>\n<p>项目中<span class=\"yellow\"> base_url</span> 需要使用<span class=\"red\"> process.env.VUE_APP_BASE_URL</span> 替换</p>\n</li>\n<li>\n<p>编译命令</p>\n</li>\n</ul>\n<figure class=\"highlight bash\"><figcaption data-lang=\"bash\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token function\">yarn</span> build-test <span class=\"token comment\">#使用.env.alpha 配置文件中的参数</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token function\">yarn</span> build-prod <span class=\"token comment\">#使用.env.prod 配置文件中的参数</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token function\">yarn</span> build <span class=\"token parameter variable\">--mode</span> alpha <span class=\"token comment\">#使用.env.alpha 配置文件中的参数</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token function\">yarn</span> build <span class=\"token parameter variable\">--mode</span> prod <span class=\"token comment\">#使用.env.prod 配置文件中的参数</span></pre></td></tr></table></figure>",
|
||||
"tags": [
|
||||
"Linux",
|
||||
"项目部署",
|
||||
|
||||
Reference in New Issue
Block a user