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

目录
相关文章
kde
|
28天前
|
应用服务中间件 网络安全 nginx
手把手教你使用 Docker 部署 Nginx 教程
本文详解Nginx核心功能与Docker部署优势,涵盖镜像拉取、容器化部署(快速、挂载、Compose)、HTTPS配置及常见问题处理,助力高效搭建稳定Web服务。
kde
602 4
|
6月前
|
应用服务中间件 Linux 网络安全
Centos 8.0中Nginx配置文件和https正书添加配置
这是一份Nginx配置文件,包含HTTP与HTTPS服务设置。主要功能如下:1) 将HTTP(80端口)请求重定向至HTTPS(443端口),增强安全性;2) 配置SSL证书,支持TLSv1.1至TLSv1.3协议;3) 使用uWSGI与后端应用通信(如Django);4) 静态文件托管路径设为`/root/code/static/`;5) 定制错误页面(404、50x)。适用于Web应用部署场景。
714 87
|
27天前
|
应用服务中间件 Linux nginx
在虚拟机Docker环境下部署Nginx的步骤。
以上就是在Docker环境下部署Nginx的步骤。需要注意,Docker和Nginix都有很多高级用法和细节需要掌握,以上只是一个基础入门级别的教程。如果你想要更深入地学习和使用它们,请参考官方文档或者其他专业书籍。
97 5
|
9月前
|
应用服务中间件 PHP nginx
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
简介: 本教程介绍如何基于 Dragonwell 的 Ubuntu 镜像创建一个运行 Nginx 的 Docker 容器。首先从阿里云容器镜像服务拉取基础镜像,然后编写 Dockerfile 确保 Nginx 作为主进程运行,并暴露 80 端口。最后,在包含 Dockerfile 的目录下构建自定义镜像并启动容器,确保 Nginx 在前台运行,避免容器启动后立即退出。通过 `docker build` 和 `docker run` 命令完成整个流程。
349 25
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
|
6月前
|
Linux 应用服务中间件 nginx
在CentOS上部署Minikube教程
至此,您已成功在CentOS上部署并使用Minikube。您可以自由探索Kubernetes的世界,熟练配置和管理Kubernetes集群。
608 20
|
6月前
|
应用服务中间件 Linux 网络安全
技术指南:如何把docsify项目部署到基于CentOS系统的Nginx中。
总结 与其他部署方法相比,将docsify项目部署到基于CentOS系统的Nginx中比较简单。以上步骤应当帮助你在不花费太多时间的情况下,将你的项目顺利部署到Nginx中。迈出第一步,开始部署你的docsify项目吧!
296 14
|
11月前
|
负载均衡 Ubuntu 应用服务中间件
nginx修改网站默认根目录及发布(linux、centos、ubuntu)openEuler软件源repo站点
通过合理配置 Nginx,我们可以高效地管理和发布软件源,为用户提供稳定可靠的服务。
1080 13
|
12月前
|
Oracle 关系型数据库 MySQL
Centos7下图形化部署单点KFS同步工具并将Oracle增量同步到KES
Centos7下图形化部署单点KFS同步工具并将Oracle增量同步到KES
Centos7下图形化部署单点KFS同步工具并将Oracle增量同步到KES
|
前端开发 JavaScript 应用服务中间件
使用nginx部署网站
使用nginx部署网站
|
应用服务中间件 Linux nginx
CentOS7安装Nginx
CentOS7安装Nginx