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

目录
相关文章
|
1月前
|
前端开发 JavaScript 应用服务中间件
使用nginx部署网站
使用nginx部署网站
|
1月前
|
应用服务中间件 Linux nginx
CentOS7安装Nginx
CentOS7安装Nginx
|
1月前
|
JavaScript 应用服务中间件 nginx
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
94 1
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
187 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
29天前
|
监控 应用服务中间件 网络安全
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
101 0
|
18天前
|
应用服务中间件 BI nginx
Nginx的location配置详解
【10月更文挑战第16天】Nginx的location配置详解
|
26天前
|
缓存 负载均衡 安全
Nginx常用基本配置总结:从入门到实战的全方位指南
Nginx常用基本配置总结:从入门到实战的全方位指南
225 0
|
30天前
|
应用服务中间件 Linux nginx
Jetson 环境安装(四):jetson nano配置ffmpeg和nginx(亲测)之编译错误汇总
这篇文章是关于在Jetson Nano上配置FFmpeg和Nginx时遇到的编译错误及其解决方案的汇总。
79 4
|
11天前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
nginx配置反向代理404问题
|
5天前
|
应用服务中间件 网络安全 PHP
八个免费开源 Nginx 管理系统,轻松管理 Nginx 站点配置
Nginx 是一个高效的 HTTP 服务器和反向代理,擅长处理静态资源、负载均衡和网关代理等任务。其配置主要通过 `nginx.conf` 文件完成,但复杂设置可能导致错误。本文介绍了几个开源的 Nginx 可视化配置系统,如 Nginx UI、VeryNginx、OpenPanel、Ajenti、Schenkd nginx-ui、EasyEngine、CapRover 和 NGINX Agent,帮助简化和安全地管理 Nginx 实例。