3.Ubuntu系统中在Nginx中部署Vue项目

1,771 阅读1分钟

1. 先用以下命令安装nginx(或检查nginx是否已经安装)

sudo ape-get install nginx

2. 移动到nginx配置文件夹目录

cd /etc/nginx/conf.d

3. 为即将导入的Vue项目新建配置文件

sudo touch vueproject-80.conf

4.  编辑配置文件

sudo vim vueproject-80.conf

5. 在配置文件中添加以下内容

server {
    listen 80;

    server_name vueproject;

    location / {
        root /vueproject    // 存放项目文件的路径
        index index.html;    //在前后端分离的基础上,通过Nginx配置,指定网站初始页。如果包括多个文件,Nginx会根据文件的枚举顺序来检查,直到查找的文件存在;

        try_file $url $url/ =404;    // 按顺序检查文件是否存在,返回第一个找到的文件。结尾的斜线表示为文件夹 -$uri/。如果所有的文件都找不到,会进行一个内部重定向到最后一个参数。
    }
}

6. 在Vue项目中使用以下命令

run npm build

成功后在项目文件夹中会出现/dist文件夹,里面有index.html和static文件夹

7. 把dist文件夹下的内容传输到服务器中的vueproject文件夹下(winscp或者其他方法)

这里如果放在普通用户的用户目录中运行的时候好像会发生权限问题,最后项目文件夹是放在root下的。

8. 重启nginx

service nginx reload

9. 在浏览器中输入地址访问