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

目录
相关文章
|
6天前
|
JavaScript 前端开发 应用服务中间件
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
13 0
|
5天前
|
存储 Ubuntu 应用服务中间件
【Nginx】centos和Ubuntu操作系统下载Nginx配置文件并启动Nginx服务详解
【Nginx】centos和Ubuntu操作系统下载Nginx配置文件并启动Nginx服务详解
11 1
|
2天前
|
运维 Serverless 应用服务中间件
Serverless 应用引擎产品使用之在阿里云Serverless中函数计算FC nginx 部署上去之后放置静态页面如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
26 0
|
8天前
|
Linux 数据库 开发者
Centos7安装docker并部署halo建站
Docker 是一个开源的应用容器引擎,它允许开发者将应用及其依赖打包到可移植的容器中,然后在任何支持 Docker 的平台上运行。Docker 的核心概念包括镜像(Image)、容器(Container)和仓库(Repository)。镜像是创建容器的基础,容器是镜像的运行实例,而仓库是存储和分发镜像的中心仓库。 Docker 的优势在于快速、一致地交付应用,实现响应式部署和扩展,以及更高效地利用硬件资源。它常用于简化配置、代码流水线管理、提
34 0
|
11天前
|
运维 安全 Linux
如何在CentOS部署JumpServer堡垒机并实现无公网ip环境远程访问
如何在CentOS部署JumpServer堡垒机并实现无公网ip环境远程访问
|
13天前
|
应用服务中间件 Linux 开发工具
如何在阿里云服务器快速搭建部署Nginx环境
以下是内容的摘要: 本文档主要介绍了在阿里云上购买和配置服务器的步骤,包括注册阿里云账号、实名认证、选择和购买云服务器、配置安全组、使用Xshell和Xftp进行远程连接和文件传输,以及安装和配置Nginx服务器的过程。在完成这些步骤后,你将能够在服务器上部署和运行自己的网站或应用。
|
16天前
|
数据可视化 Linux Apache
CentOS部署Apache Superset大数据可视化BI分析工具并实现无公网IP远程访问
CentOS部署Apache Superset大数据可视化BI分析工具并实现无公网IP远程访问
|
16天前
|
JavaScript Linux 数据安全/隐私保护
如何在CentOS7部署Wiki.js知识库并实现分享好友公网远程使用【内网穿透】
如何在CentOS7部署Wiki.js知识库并实现分享好友公网远程使用【内网穿透】
|
19天前
|
应用服务中间件 Linux nginx
CentOS7安装Nginx
CentOS7安装Nginx
32 0
|
21天前
|
存储 Linux Shell
centos 部署docker容器 安装 、基本使用方法(一)
centos 部署docker容器 安装 、基本使用方法(一)
33 0

热门文章

最新文章