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

vue的build及部署

• vuecli的导出
• • main.js的路由位置
  • 引入的阿里图标库
  • config中的index.js
  • build中utils的静态资源导出
  • 导出
• centos7与django的部署
• • django样式的打包到static
  • vuecli的部署

vuecli的导出

main.js的路由位置

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

引入的阿里图标库

引入的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: './',

build中utils的静态资源导出

指定导出的路径publicPath
publicPath: ‘…/…/’

导出

npm导出

$ npm run build

得到dist的文件夹

直接打开，ok!

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的部署参考下面一篇博客
centos7_部署django

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 $uri $uri/ @router;#路由配置
        }
        location @router{
                rewrite ^.*$ /index.html last;
        }

reload一下nginx

$ ./nginx -s reload

访问与ip绑定的域名
ok，没问题！