网站首页 > 博客文章 正文
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上。对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache、Nginx和Tomcat 。Nginx是一款高性能、低消耗的轻量级反代理服务器很适合中小型项目,这里选择Nginx服务器来部署Vue项目。
打包Vue项目
项目发布之前我们需要先将项目进行打包,Vue脚手架是利用webpack将前端代码通过编译、压缩,合并等操作,将代码进行整合优化并生成浏览器可直接识别的文件(如html,css,fonts、img、js等)。具体的打包介绍可以参考文章【Vue实战074:你真的了解了项目打包么?来普及下吧!】,这里我们直接通过命令:npm run build对vue项目进行打包,打包之后会在项目根目录生成一个dist 文件夹用来存放打包编译的文件。
Callback was already called错误
Vue-cli3.0在打包的时候会自动将js和css分开打包,把所有的css样式打包成一个个css文件。如果打包的时候遇到错误:Callback was already called,vue.config.js文件中配置css: {extract: false}}。该配置指定css是否使用分离插件ExtractTextPlugin(默认为true),将extract改成false则会将样式强制内联不生成单独的css文件。
Nginx测试
我们可以在Windows上用Nginx先测试下是否能正常的访问,在Windows使用Nginx可以参考文章【Nginx实战001:Window中配置使用Nginx入门 】。将打包好的项目拷贝到nginx的html目录中,启动nginx并在浏览器地址栏输入网址 http://localhost:80访问项目。
Nginx服务部署
在本地测试没问题我们既可以开始部署了,先在服务器上安装nginx。Centos安装Nginx跟Ubuntu安装基本一样,这里就不再重复了,有需要可以参考文章【Linux实战008:Ubuntu搭建Nginx服务器详细图解】。我们把打包好的文件上传到nginx的html目录中(该目录一般在/usr/share/nginx/html),利用finalshell等工具可以快速将文件上传到服务器指定目录。
修改Nginx配置
docker的nginx基础配置文件一般存放在/etc/nginx文件夹下的nginx.conf文件中,默认的配置default.conf也存放在这里。我们的服务器配置就放在default.conf中,用户可以根据自己的项目需求来配置nginx。通过vim修改好之后执行命令:wq保存退出,再执行命令:sudo ./nginx -s reload重启下nginx即可(docker可以重启容器)。
总结:
Nginx默认配置的监听端口为80,如果当前端口已经被占用的话就可以在这里进行修改。具体的配置按照自己的项目需求进行修改,一般我们都在server中进行配置(一个server代表一个服务站点,可以配置多个server节点搭建多个站点)。以上内容是小编给大家分享的【Vue实战091:Vue项目部署到nginx服务器】。希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏:
为了方便学习,下面附上本文用到的源码:
server {
listen 8800; #监听端口
server_name localhost; #访问域名
charset utf-8; #编码格式
#access_log logs/host.access.log main;
location / {
root html; #站点根目录,可以是相对路径,也可以使绝对路径
index index.html index.htm; #默认主页
proxy_pass http://10.134.112.186:8010; #转发后端站点地址,用来访问后台接口
add_header 'Access-Control-Allow-Origin' '*'; #允许跨域请求
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
}
猜你喜欢
- 2024-10-05 Nginx + FastCGI 程序(C/C++) 搭建高性能web service
- 2024-10-05 Docker使用Nginx制作静态文件服务器
- 2024-10-05 使用nginx将服务器升级为https(nginx代理服务器配置)
- 2024-10-05 vue项目打包后部署到nginx(vue打包 nginx)
- 2024-10-05 Nginx Windows详细安装部署教程(nginx安装及配置教程)
- 2024-10-05 Zabbix4.0企业级搭建实战(1)LNMP之Nginx服务器编译安装
- 2024-10-05 Linux上安装Nginx服务器(linux安装nginx详细步骤)
- 2024-10-05 Nginx 整合 FastDFS 实现文件服务器
- 2024-10-05 Linux中如何简单快速安装nginx以及如何配置
- 2024-10-05 在CentOS上安装nginx服务器(centos7离线安装nginx)
你 发表评论:
欢迎- 07-08Google Cloud Platform 加入支持 Docker 的容器引擎
- 07-08日本KDDI与Google Cloud 签署合作备忘录,共探AI未来
- 07-08美国Infoblox与Google Cloud合作推出云原生网络和安全解决方案
- 07-08GoogleCloud为Spanner数据库引入HDD层,将冷存储成本降低80%
- 07-08谷歌推出Cloud Dataproc,缩短集群启动时间
- 07-08Infovista与Google Cloud携手推进射频网络规划革新
- 07-08比利时Odoo与Google Cloud建立增强合作,扩大全球影响力
- 07-08BT 和 Google Cloud 通过 Global Fabric 加速 AI 网络
- 最近发表
-
- Google Cloud Platform 加入支持 Docker 的容器引擎
- 日本KDDI与Google Cloud 签署合作备忘录,共探AI未来
- 美国Infoblox与Google Cloud合作推出云原生网络和安全解决方案
- GoogleCloud为Spanner数据库引入HDD层,将冷存储成本降低80%
- 谷歌推出Cloud Dataproc,缩短集群启动时间
- Infovista与Google Cloud携手推进射频网络规划革新
- 比利时Odoo与Google Cloud建立增强合作,扩大全球影响力
- BT 和 Google Cloud 通过 Global Fabric 加速 AI 网络
- NCSA和Google Cloud合作开发AI驱动的网络防御系统,加强泰国网络空间的安全性
- SAP将在沙特阿拉伯 Google Cloud 上推出BTP服务
- 标签列表
-
- ifneq (61)
- 字符串长度在线 (61)
- googlecloud (64)
- messagesource (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)