vue利用webpack搭建开发,uat,生产三套环境

vue利用webpack搭建开发,uat,生产三套环境,第1张

webpack本身有dev和prodcution两套环境,我们的项目还有uat环境,只有两套环境并无法满足项目开发的需要,因为我参考webpack搭建dev环境的方式搭建了uat环境。
首先,找到项目的packagejson,找到scripts,加上uat指令的定义,

很容易理解,当我们执行npm run dev时候执行node中build目录的dev-serverjs,所以我们定义了uat指令执行uat-serverjs。
uat-serverjs

webpackuatconfjs

uatenvjs

找到config下方的indexjs
在dev下方增加uat的配置,配置如下:

这样,搭建了dev,uat和production三套环境,我们在devenvjs增加API_ROOT:

在prodenvjs增加API_ROOT:

在配置api接口的文件中,将baseURL设置成:

这里以axios的设置为例,项目根据实际情况调整。
如此,当我们运行

指向的域名服务器

当我们运行

指向的域名服务器是

这是前面配置的自定义指令,可根据项目实际情况定义自己的指令
当我们运行

指向的域名服务器是

打包项目的时候,打包的是根据服务器获取到相应的接口,我们就不用调来调去,也不容易出错,有问题欢迎留言讨论。

最好是安装一个。
1如果你仅仅是打包好的vue相机,那么要看服务端使用的是什么语言,如果是node的话,肯定要安装node环境的,但是如果不是node,那么就没有必要了。
2如果你想在服务端跑vue的项目,也就是在远程端做开发工作,那么肯定是要安装node的,毕竟vue开发环境需要node。
基本上服务端也就这两种需求,node包其实很小,安装一个也不费事,还可以方便开发,我觉得在远程端按一个最好。

在开发环境,vue-cli 会帮我们创建一个开发服务器( >1、Vue本地启动项目:Vue项目可以在本地启动,通过npm run serve可以启动一个本地服务器,本地服务器可以提供静态文件,不支持动态数据的处理,比如数据库 *** 作等。
2、访问web服务器发送请求:访问web服务器发送请求,可以通过>

你的服务器是什么系统啊 ,,,linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先服务器安装node git   nginx  vue-cli

安装好nginx 用你的公网ip访问就可以看到 下面的页面

然后进入到下面的路径

vi default 你会看到nginx的默认配置

默认监听80端口 根路径

把你写好的vue项目 上传到github ,通过git clone 克隆到

服务器

路径下面

然后npm/yarn add/install 安装依赖 然后npm run build

vi 打开html 下面的 indexhtml 可以看到

nginx默认的html

进入sites-enabled 发现 它里面的 default 来自 sites-available的default

所以需要在 sites-available 新建一个文件 你的项目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin 映射到 sites-enables

注意路径一定要写全

最后重新加载下 nginx -s reload

打开浏览器 公网ip:端口号  或者 域名访问

这就可以了

还有 用express 部署这个 简单些


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/12925218.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-29
下一篇 2023-05-29

发表评论

登录后才能评论

评论列表(0条)

保存