云服务器部署vue工程

虹色轨迹🌠2023-03-052024-07-17

[vue]: # ‘https://npm.elemecdn.com/blogcoverimgs@1.0.0/blogs/wallhaven-d6827l.jpg?vw=9500&vh=4820‘

云服务器部署vue

执行npm run build:prod打包vue工程
注意的是：记得修改自己生产环境调用的接口的地址
执行build命令之后，会生成一个dist打包目录

进入虚拟机
编写nginx配置文件，方便做映射
在/usr/local/nginx/conf.d/admin.xz.com.conf中编写

server{
    listen 80;
    server_name   admin.xz.com; # 编写的是后面配置本机hosts的域名

    location / {
        root /var/www/admin.xz.com;
        index index.html;
    }
}

然后在/var/www/admin.xz.com目录中上传我们dist目录中打包的所有文件

最后在本机配置好hosts，就可以直接访问了