欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

记一次vue项目打包发布过程

程序员文章站 2022-07-13 08:54:17
...

vue项目打包:

npm run build

文件当中的图片引用,包括css类的背景图片类都应该用import引入,然后写在data当中,视图再动态绑定。不能直接写在css里

打包之后在服务器上部署:
从服务器获取资源或者文件,得先在服务器上面有一个服务,可以是自己用什么语言写,也可以是现成的服务器软件。比如nodejs,创建一个服务,在app.js里面用express.static托管哪个目录,然后给这个nodejs项目监听一个端口就行。本项目使用nginx,配置里面写监听的端口,这个服务托管的文件对应的目录,然后启动一下nginx,就可以访问到你想要的资源了。
进入到nginx文件下的conf.d文件,用vim编辑peo.conf文件。

server {
    listen              8080;
    server_name         0.0.0.0;

    location / {
        root                /your_wp_path/;
        index               index.html;
    }
}

listen后面写监听的端口。server_name后面跟你的域名(如果没有域名,就写ip,不知道ip就写下划线_)root就是你放文件的地方。这里是打包之后上传的dist文件。index就是访问你的网站的时候,如果不加路径默认会显示哪个文件。
最后执行 service nginx status 服务启动成功。