部署vue.js3.x项目到线上(vue.js 3.2.6/nginx 1.18.0)

一，在本地打包vue.js项目:

1,进入项目目录，

查看vue.js的版本:

liuhongdi@lhdpc:/data/vue/storeweb$ npm list vue
storeweb@0.1.0 /data/vue/storeweb
├─┬ @vue/cli-plugin-babel@4.5.13
│ └─┬ @vue/babel-preset-app@4.5.13
│   └── vue@3.2.6 deduped
├─┬ element-plus@1.1.0-beta.7
│ └── vue@3.2.6 deduped
├─┬ vue-router@4.0.11
│ └── vue@3.2.6 deduped
└── vue@3.2.6

2,查看需要在nginx上设置的url:

liuhongdi@lhdpc:/data/vue/storeweb$ more vue.config.js
'use strict'
module.exports = {
    publicPath: './',
    lintOnSave: process.env.NODE_ENV === 'development',
    productionSourceMap: false,
    devServer: {
        proxy: {
            ['/api']:{
                target:`http://127.0.0.1:10800/`,
                changeOrigin:true,
                pathRewrite: {
                    ['^/api']: ''
                }
            }
        }
    },
…

可以确定api打头的接口地址需要在nginx中进行设置

 

3,进行打包:

liuhongdi@lhdpc:/data/vue/storeweb$ npm run build

4,查看dist目录下的打包结果:

liuhongdi@lhdpc:/data/vue/storeweb$ ls dist
css  favicon.ico  fonts  index.html  js

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/28/bu-shu-vue-js3-x-xiang-mu-dao-xian-shang-vue-js-3-2-6-nginx/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，服务端：配置nginx虚拟主机

1,创建一个虚拟主机：

[root@blog conf.d]# vi storeweb.conf

内容:

server {
    listen       80;
    server_name  store.lhdtest.net;
    root         /data/store/web/html;
    index         index.html;
    location /api {
        rewrite  ^/api/(.*)$ /$1 break;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:10800;
    }
    location / {
        try_files $uri $uri/ /index.html;
    }
    access_log      /data/logs/nginxlogs/store_web.access_log;
    error_log       /data/logs/nginxlogs/store_web.error_log;
} 

说明：要针对api打头的url访问转发到后端的接口服务

三，从本地上传dist目录下的文件到服务端

1,创建documentroot目录

[root@blog conf.d]# mkdir -p /data/store/web/html

2,把打包后dist目录中的文件上传到新创建的目录

 

3,在服务端查看上传后效果:

[root@blog ~]# ls /data/store/web/html/
css  favicon.ico  fonts  index.html  js

四，上传后，测试效果

1,重启nginx

[root@blog ~]# systemctl reload openresty.service 

2,从浏览器查看效果:

说明：页面中当前域一项，是从后端的api接口获取的，

           在生产环境中应该先部署好后台接口站,

            此处仅做演示

 

五，本地:查看@vue/cli 及node的版本:

liuhongdi@lhdpc:/data/vue/storeweb$ vue -V
@vue/cli 4.5.13
liuhongdi@lhdpc:/data/vue/storeweb$ node -v
v14.17.1

 

六，服务端:查看nginx的版本:

[root@centos8 nginx-1.18.0]# /usr/local/soft/nginx-1.18.0/sbin/nginx -v
nginx version: nginx/1.18.0