企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
1.我们直接在项目的根目录下运行命令 `npm run build` ![](https://box.kancloud.cn/5dce7aad746dbfe9521758e9934fe84c_972x470.png) 等待运行完成,我们发现在根目录下生成了一个 dist 的文件夹。直接将这个文件夹丢到服务器,就可以运行了。 **这里是简单的nginx的配置** ``` server{ listen 80; #监听端口 server_name xxxx; #域名,代替将要访问的端口 root "xxxx"; #要访问的网站的目录 location / { try_files $uri $uri/ /index.html; #该句代码是为解决history路由不能跳转的问题,在vue-router官网有介绍 } ##配置后端服务地址映射 location ^~ /api{ proxy_pass http://xxxx/; } } ``` 2.但是有的时候,会有不一样的需求,不一样的环境。比如说线上正式环境,线上测试环境,这个时候,如果每次都要修改参数再构建就很麻烦。我们可以按照不同的环境,构建各个环境的项目文件。 3.我们打开根目录下的package.json 文件。我们就会看 build 运行的是build文件夹下的build.js 文件。我们可以再新增两个,一个是线上的正式环境,一个是线上的测试环境。 ![](https://box.kancloud.cn/e2e9f95fdc5ee285b67f2ca11e5c252b_961x286.png) 同时。复制 build.js ,新建 buildBeta.js、buildProd.js两个文件 ![](https://box.kancloud.cn/f6db8f2138ffaba35a22c9fe6de47e5d_184x71.png) 4.这里需要注意两个地方 ![](https://box.kancloud.cn/cd9529868400f2819acc2201dde74d81_759x348.png) 第一个是为了区分当前所在的环境。第二个是配置文件。我们如果需要修改生成的文件夹名称,可以在相应的配置文件进行修改。 5.我这里修改的是生成的文件夹名称为 prod ![](https://box.kancloud.cn/99732394cde2e8e086cf7652ebaf03ac_815x464.png) 然后运行命令 `npm run buildProd`,等待运行完成。 ![](https://box.kancloud.cn/80303a8b297053aac5a0503cc66ac652_941x389.png) 就可以看到根目录下生成的 prod 文件夹。 6.同样,我们修改beta, 运行命令 `npm run buildBeta`,也可以看到生成的对应文件夹。将文件夹直接扔服务器,就可以运行啦。 **错误的地方欢迎指正,不明白的地方可以留言。**