vue-打包上线

Posted sansancn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-打包上线相关的知识,希望对你有一定的参考价值。

部署阿里云( centos  +  nodejs + mongodb + vue)

    vue 打包->dist    copy -> node项目>public   -> 服务器上
    前端工程|后端工程|库文件 -》 云服务上面


    服务器类型:  部署阿里云(centos + nodejs + mongodb + vue)
二、使用finalShell连接服务器
        1. 安装 finalShell
        2. 启动 finalShell
            新建会话:
                主机:公网IP
                端口 : 22
                用户身份验证:
                    用户名:root
                    密码: 登录密码
三、給服务器安装环境(node + vue访问json)
        
        1、安装node 
            curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash -
            yum install -y nodejs
            检测: node -v  

    四、上传代码(前端|后端)
        1. 创建空的node环境:      express -s .
        2. vue 打包:          npm run build  -> dist
        3. dist里面的文件  copy -> 空node 项目的 public下面
        4. 把node项目 -》 拖拽到 finalSheel>/usr/local/创建目录/
        5. http://公网ip:3000
            问题:服务器代码数据库都已上传,但是访问不了
            分析: 很可能是3000端口不能被使用, 需要添加"安全组规则"
            解决: 找到管理->安全组-》配置规则-》添加规则-》端口范围(3000/3000),授权对象(0.0.0.0/0)

            
            问题: finalSheel关闭后:服务停止 浏览器就不可以访问了

            解决: 
                    npm i pm2 -g
                    cd /usr/local/你的目录
                    pm2 start ./bin/www 

            浏览器访问项目即可
                ip地址:3000

技术图片

技术图片
技术图片
技术图片
技术图片
技术图片
技术图片
技术图片
技术图片
技术图片
技术图片
技术图片
技术图片
技术图片
技术图片

部署阿里云( centos  +  nodejs + mongodb + vue)

    vue 打包->dist    copy -> node项目>public   -> 服务器上
    前端工程|后端工程|库文件 -》 云服务上面


    服务器类型:  部署阿里云(centos + nodejs + mongodb + vue)


    简洁:
    ----------------------------------
    一、买服务器(机器)
        1. 学生特惠24:
            https://promotion.aliyun.com/ntms/act/campus2018.html?spm=5176.230344.1224685.2.3b84443e9LLgUu
            云服务器ECS
            root/@Root123

            普价:
                https://promotion.aliyun.com/ntms/act/qwbk.html?spm=5176.8112568.420890.1.7e469ed538CFBL
        2.  支付宝-》注册-》实名认证填写身份证的信息-》ecs
        3.  重设密码(登录密码):  
                ecs服务器->实例->更多->重置实例密码
                用户名默认: root
                重启实例 @Root123
    二、使用finalShell连接服务器
        1. 安装 finalShell
        2. 启动 finalShell
            新建会话:
                主机:公网IP
                端口 : 22
                用户身份验证:
                    用户名:root
                    密码: 登录密码

    三、給服务器安装环境(node + vue访问json)
        
        1、安装node 
            curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash -
            yum install -y nodejs
            检测: node -v  

    四、上传代码(前端|后端)
        1. 创建空的node环境:      express -s .
        2. vue 打包:          npm run build  -> dist
        3. dist里面的文件  copy -> 空node 项目的 public下面
        4. 把node项目 -》 拖拽到 finalSheel>/usr/local/创建目录/
        5. http://公网ip:3000
            问题:服务器代码数据库都已上传,但是访问不了
            分析: 很可能是3000端口不能被使用, 需要添加"安全组规则"
            解决: 找到管理->安全组-》配置规则-》添加规则-》端口范围(3000/3000),授权对象(0.0.0.0/0)

            
            问题: finalSheel关闭后:服务停止 浏览器就不可以访问了

            解决: 
                    npm i pm2 -g
                    cd /usr/local/你的目录
                    pm2 start ./bin/www 

            浏览器访问项目即可
                ip地址:3000
         
    ----------------------------------




    高级:

    ----------------------------------
    一、买服务器(机器)
        1. 成人特惠: https://promotion.aliyun.com/ntms/act/qwbk.html?spm=5176.8112568.420890.1.67ae9ed5edEDHe
           云服务器ECS
        2.  支付宝-》注册-》实名认证填写身份证的信息-》ecs
        3. 手动停止服务器 ----> 初始化磁盘 ---> 重设密码(登录密码)
    二、使用finalShell连接服务器
        1. 安装 finalShell
        2. 启动 finalShell
            新建会话:
                主机:公网IP
                端口 : 22
                用户身份验证:
                    用户名:root
                    密码: 登录密码
    三、給服务器安装环境(node + mongodb)
        1、安装node 
            curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash -
            yum install -y nodejs
            检测: node -v  

                使用NVM安装多版本(可选)
                2.1    yum install git
                2.2    git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
                2.3    echo ". ~/.nvm/nvm.sh" >> /etc/profile
                2.4  source /etc/profile
                2.5  cd /
                2.6  nvm list-remote
                nvm install vx.x.x
                nvm use vx.x.x

                安装解压文件模块
                    yum install unzip
                安装文件传输工具(可选)
                    yum -y install lrzsz 
        2. npm i pm2 -g

    四、上传代码(前端|后端)
        1. vue 打包: npm run build
        2. 本地测试生成环境
            npm i serve -g
            serve -s dist -l 8080

            问题 : 生成环境下 不能访问 3000
            原因  : 生成环境下代理是无效的
            解决: 服务器端 安装ngnix  来完成代理

        3. 拷贝 dist ->  node的public下面   + 本地测试(启动node服务)
        4. 整合好的node 拖到 finalShell 下面
        5. npm i -》  npm start | pm2 start ./bin/www

        6. 问题:  没有库

    六、給服务器安装mongodb服务

            安装mongodb
            yum install mongodb-server mongodb -y
             
            创建数据库目录和日志目录
            mkdir -p /data/db
            mkdir -p /data/logs/db
             
            启动数据库
            mongod --fork --dbpath /data/db --logpath /data/logs/db/nodeapp.log
             
            创建远程数据库(与本地操作一样)可选
                use 库、db.集合.save、
    七、本地数据库copy到远程库
        
        本地出库:   
            需要先导出本地的数据 -> json

            mongoexport -h 127.0.0.1 -d 库名 -c 集合名 -o 输出路径/xx.json

        上传: json -> finalShell上传到远端磁盘 -》 远端

        远端入库:  
            json -> 导入数据库
            mongoimport -d 远端库 -c 集合 -file 服务器json路径/xx.json
    ----------------------------------

    问题0:  关闭finalShell ,服务断了

        安装pm2, nodejs服务器管理器 (npm i pm2 -g)
        启动服务器:pm2 start 启动文件.js 
        浏览器访问项目即可
        如果想停掉服务器: pm2 stop all
     
        Pm2扩展:https://blog.csdn.net/chengxuyuanyonghu/article/details/74910875

    问题1:如果关闭xshell之后,再次打开发现之前安装的模块都无效了,
        分析: 安装了多版本node环境导致
        解决:
            a) 输入nvm ls 查看可用的node的版本,-->手动指向nvm use当前使用的node版本
            b) 使用nvm install vx.x.x,之后使用nvm alias default vx.x.x可以不用每次进入服务器都要nvm use了***

    问题2:可以有多个app?使用一个实例?
        分析:app指向不同端口就好了
        解决:app指向不同端口,安全组里添加多个端口,pm2 进入到对应服务器位置,逐个启动,如果端口重复,先启用的应用会占用端口

    问题3:本地代码对应有哪些变动
        mongodb://localhost:27017 可不用动,远端访问的也是localhost
        io(‘http://localhost:3000’)->io(‘http://服务器ip:3000’)

                  
    问题4: 不想要端口可以?,
        分析:使用http协议默认的80端口
        解决: 修改本地的端口号指向80,安全组添加80


    问题5: 不使用ip,使用网址
        分析: 是一个IP和域名关联的过程

        解决: 
            域名购买:
                https://promotion.aliyun.com/ntms/act/domainbrand.html?spm=5176.8112568.483655.2.67ae9ed5edEDHe
            域名解析:
                域名-》解析-》添加记录->记录值(ip)
                    www:解析后的域名为www.aliyun.com。
                    @:直接解析主域名 aliyun.com。
                    二级域名:如:abc.aliyun.com,填写abc。

            备案: 特惠专区-》域名与网站->域名新手多重礼(实名,备案15工作日)
                未备案不可使用一级域名和端口省略

        问题6: 不备案有什么影响
            小程序上线时不能部署
            没有域名不便于宣传
            无法使用https安全协议访问

        问题7: 启用https访问
            SSL证书->获取https免费证书->配置(node服务器使用https模块响应)
            
            获取https免费证书:
                https://yq.aliyun.com/articles/221596?spm=5176.10695662.1996646101.searchclickresult.1dec5d98Oy3WNE

            下载: 证书通过后->下载 other类型的 xx.key/xx.pem 下载到-> bin/www

            配置:  

                node配置: bin/www

                var https = require('https');
                const fs = require('fs');
                const port=443;     
                app.set('port', port);

                const options = 
                  key: fs.readFileSync('./bin/1826016_uncle9.top.key'),//指向key
                  cert: fs.readFileSync('./bin/1826016_uncle9.top.pem'),
                ; 
                var server = https.createServer(options,app);//查看nodejs.cn>https模块

                安全组规则:添加443 
                    

        问题8: 如何添加二级域名 xx.uncle9.top
            域名->管理->域名解析
        问题9: 如何在浏览器访问uncle9.top是自动跳转到https
            https://blog.csdn.net/chwshuang/article/details/52443274



    阿里云服务器 ECS 部署lamp:centos+apache+mysql+php安装配置方法 (centos7)
        https://www.cnblogs.com/mike-mei/p/7554591.html


以上是关于vue-打包上线的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目部署,打包发布上线

Vue项目的打包上线运行(Tomcat)和SpringBoot打包

Vue项目的打包上线运行(Tomcat)和SpringBoot打包

vue项目打包上线

vue-打包上线

Vue项目的打包上线步骤