记录_vuecli的打包部署(无法加载elementui和静态资源、centos7中nginx部署)

简介: 记录_vuecli的打包部署(无法加载elementui和静态资源、centos7中nginx部署)

vuecli的导出

main.js的路由位置

引入的js和css样式位于router.js之前
image.png

引入的阿里图标库

引入的js

<script src="//at.alicdn.com/t/font_1957918_9kt1mmflyr8.js"></script>

添加http协议(打包造成无法显示阿里图标的问题)

<script src="http://at.alicdn.com/t/font_1957918_9kt1mmflyr8.js"></script>

config中的index.js

在build的配置中
初始的配置

assetsPublicPath: '/'

改为

assetsPublicPath: './',

image.png

build中utils的静态资源导出

指定导出的路径publicPath
publicPath: '../../'
image.png

导出

npm导出

$ npm run build

得到dist的文件夹
image.png

直接打开,ok!
image.png

centos7与django的部署

django样式的打包到static

django项目打包后台的css样式到static文件夹
收集样式之前在seeting.py添加静态文件夹路径

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")

colletstatic

$ collectstatic

成功后将STATIC_ROOT注释
在这里插入图片描述
django的部署参考下面一篇博客
image.png

vuecli的部署

配置nginx.conf

http {
   
   
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    server {
   
   
        listen  80;
        server_name 127.0.0.1;
        charset utf-8;
        root /data/wwwroot/vue_project/myblog/dist;#vue项目
        location / {
   
   
                try_files {
   
   mathJaxContainer[0]}uri/ @router;#路由配置
        }
        location @router{
   
   
                rewrite ^.*$ /index.html last;
        }

reload一下nginx

$ ./nginx -s reload

访问与ip绑定的域名
ok,没问题!
image.png

目录
相关文章
|
3月前
|
弹性计算 运维 监控
快速部署 Nginx 社区版
Nginx是一个高性能的HTTP和反向代理服务器。Nginx在计算巢上提供了社区版服务,您无需自行配置云主机,即可在计算巢上快速部署Nginx服务、实现运维监控,从而方便地基于Nginx搭建您自己的应用。本文介绍使用如何通过计算巢快速部署Nginx社区版。
快速部署 Nginx 社区版
|
2月前
|
前端开发 JavaScript 应用服务中间件
使用nginx部署网站
使用nginx部署网站
|
2月前
|
应用服务中间件 Linux nginx
CentOS7安装Nginx
CentOS7安装Nginx
|
2月前
|
JavaScript 应用服务中间件 nginx
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
140 1
|
2月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
707 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
Kubernetes 应用服务中间件 nginx
k8s基础使用--使用k8s部署nginx服务
本文介绍了Kubernetes中核心概念Deployment、Pod与Service的基本原理及应用。Pod作为最小调度单元,用于管理容器及其共享资源;Deployment则负责控制Pod副本数量,确保其符合预期状态;Service通过标签选择器实现Pod服务的负载均衡与暴露。此外,还提供了具体操作步骤,如通过`kubectl`命令创建Deployment和Service,以及如何验证其功能。实验环境包括一台master节点和两台worker节点,均已部署k8s-1.27。
215 1
|
3月前
|
应用服务中间件 nginx Docker
docker应用部署---nginx部署的配置
这篇文章介绍了如何使用Docker部署Nginx服务器,包括搜索和拉取Nginx镜像、创建容器并设置端口映射和目录映射,以及如何创建一个测试页面并使用外部机器访问Nginx服务器。
|
2月前
|
监控 应用服务中间件 网络安全
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
150 0
|
2月前
|
监控 应用服务中间件 nginx
详细解释容器以及虚拟机centos7.9容器化部署基础服务(容器化部署nginx)
容器是一种轻量级、可移植的软件打包和隔离技术,将应用程序及其依赖项打包,确保在任何环境中一致运行。容器共享主机操作系统内核,相比虚拟机更高效、轻量,具有快速启动和高资源利用率的特点。容器的关键技术包括命名空间(如 PID、NET 等)、控制组(cgroups)和联合文件系统(UnionFS)。使用容器可以提高开发和部署效率,简化管理,确保环境一致性。例如,在 CentOS 7.9 上部署 Nginx 时,可以通过 Docker 下载和运行 `nginx:1.20` 镜像,并通过端口映射使外部请求访问 Nginx 服务。此外,还可以将测试页面复制到容器中,进一步验证容器的功能。
|
3月前
|
负载均衡 网络协议 应用服务中间件
web群集--rocky9.2源码部署nginx1.24的详细过程
Nginx 是一款由 Igor Sysoev 开发的开源高性能 HTTP 服务器和反向代理服务器,自 2004 年发布以来,以其高效、稳定和灵活的特点迅速成为许多网站和应用的首选。本文详细介绍了 Nginx 的核心概念、工作原理及常见使用场景,涵盖高并发处理、反向代理、负载均衡、低内存占用等特点,并提供了安装配置教程,适合开发者参考学习。