记录_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

目录
相关文章
|
5月前
|
应用服务中间件 网络安全 nginx
手把手教你使用 Docker 部署 Nginx 教程
本文详解Nginx核心功能与Docker部署优势,涵盖镜像拉取、容器化部署(快速、挂载、Compose)、HTTPS配置及常见问题处理,助力高效搭建稳定Web服务。
2353 4
|
5月前
|
应用服务中间件 Linux nginx
在虚拟机Docker环境下部署Nginx的步骤。
以上就是在Docker环境下部署Nginx的步骤。需要注意,Docker和Nginix都有很多高级用法和细节需要掌握,以上只是一个基础入门级别的教程。如果你想要更深入地学习和使用它们,请参考官方文档或者其他专业书籍。
285 5
|
应用服务中间件 PHP nginx
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
简介: 本教程介绍如何基于 Dragonwell 的 Ubuntu 镜像创建一个运行 Nginx 的 Docker 容器。首先从阿里云容器镜像服务拉取基础镜像,然后编写 Dockerfile 确保 Nginx 作为主进程运行,并暴露 80 端口。最后,在包含 Dockerfile 的目录下构建自定义镜像并启动容器,确保 Nginx 在前台运行,避免容器启动后立即退出。通过 `docker build` 和 `docker run` 命令完成整个流程。
502 25
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
|
10月前
|
Linux 应用服务中间件 nginx
在CentOS上部署Minikube教程
至此,您已成功在CentOS上部署并使用Minikube。您可以自由探索Kubernetes的世界,熟练配置和管理Kubernetes集群。
924 20
|
10月前
|
应用服务中间件 Linux 网络安全
技术指南:如何把docsify项目部署到基于CentOS系统的Nginx中。
总结 与其他部署方法相比,将docsify项目部署到基于CentOS系统的Nginx中比较简单。以上步骤应当帮助你在不花费太多时间的情况下,将你的项目顺利部署到Nginx中。迈出第一步,开始部署你的docsify项目吧!
414 14
|
应用服务中间件 Linux 网络安全
虚拟机Centos下载安装Nginx并安装ssl模块——小白教程
虚拟机Centos下载安装Nginx并安装ssl模块——小白教程
793 0
|
应用服务中间件 Linux nginx
【Linux环境】centOS 7安装nginx详细步骤及nginx配置
【Linux环境】centOS 7安装nginx详细步骤及nginx配置
3539 0
|
应用服务中间件 Linux 网络安全
2022年超详细在CentOS 7上安装Nginx方法(源码安装)
这篇文章提供了在CentOS 7系统上通过源码安装Nginx的详细步骤,包括从官网下载Nginx源码包、上传至虚拟机、解压、删除压缩包、编译安装前的配置、安装PCRE库(因为Nginx使用PCRE库解析正则表达式)、安装zlib和OpenSSL库(用于支持HTTPS协议)、重新编译Nginx、安装后启动Nginx服务、关闭服务、修改默认端口、以及重启服务测试等步骤。文章还提供了相关命令和操作截图,帮助用户更好地理解和执行安装过程。
2022年超详细在CentOS 7上安装Nginx方法(源码安装)
|
应用服务中间件 Linux nginx
CentOS7安装Nginx
CentOS7安装Nginx
|
应用服务中间件 Linux nginx
在CentOS上使用源码包安装Nginx、以及手动启动Nginx的步骤过程
这篇文章介绍了在CentOS系统上使用Nginx源码包进行安装和配置的详细步骤,包括源码包的获取、解压、配置、编译、安装、启动验证以及注意事项。
1172 0
在CentOS上使用源码包安装Nginx、以及手动启动Nginx的步骤过程