精华内容
下载资源
问答
  • Vue项目部署到服务器

    千次阅读 2019-10-07 12:09:25
    登录云服务器 1)远程主机添加用户 adduser web 2)配置文件给权限 打开编辑文件 sudo vim /etc/sudoers 按i编辑,然后复制下面代码,按esc,按住shift+:,然后输入wq,保存并退出 web ALL=(ALL:ALL) ALL 2....

    1.首先创建一个用户然后给管理员权限,因为超级管理员root,权限最高,操作有风险
    登录云服务器

    1)远程主机添加用户

    adduser web 
    

    2)配置文件给权限
    打开编辑文件

    sudo vim /etc/sudoers
    

    按i编辑,然后复制下面代码,按esc,按住shift+:,然后输入wq,保存并退出

    web ALL=(ALL:ALL)  ALL
    

    2.本地和服务器建立连接
    1)鼠标右键打开Git Bash here
    2)进入ssh文件夹

    `cd ~/.ssh/`
    

    3)复制密钥

    ssh-copy-id -i ~/ssh/id_rsa.pub web@你的服务器公网地址
    

    4)远程登录服务器

    ssh web@你的公网IP
    

    5)更新软件包和安装nodejs
    安装之前,先更新一波服务器上所有软件包信息

     sudo apt-get update
    

    然后安装nodejs

    sudo apt-get install nodejs -y
    

    6)安装npm

    sudo apt-get install npm -y
    

    7)安装插件n(nodejs管理插件)
    因为服务器直接安装的node和npm版本较低,所有需要更新

    sudo npm install n -g
    

    然后更新最新的nodejs

    sudo n latest
    

    然后exit退出一下,在登录,nodejs就是最新版本了

    **3.**如果只是部署项目的话,这就配置完毕了,上线接口的话,还需要安装pm2,让nodejs一直运行,数据库的话,看个人需要,安装什么样的数据库
    4.项目上线
    连接远程服务器,然后进入ssh目录,参考上面流程
    生成密钥

    ssh-keygen -t rsa
    

    打开密钥

    cat ~/.ssh/id_rsa.pub
    

    5.复制密钥到git仓库
    上面出来的一串密钥,复制,然后进入GitHub
    打开setting,如下图
    在这里插入图片描述
    然后打开ssh
    在这里插入图片描述
    然后右边点击添加新的密钥,把刚才的代码复制过去
    6.进入dos,创建个文件夹,然后放你的项目

    git clone 你的远程库项目地址
    
    cd 进入你的目录,然后npm i安装依赖项
    
    npm run build 
    

    生成dist文件夹
    7.配置端口
    1)进入配置环境
    cd /etc/nginx
    2)进入 nginx.conf,改文件名字
    sudo vim nginx.conf
    user 改为你创建的用户名字,然后esc,按住shift+冒号,输入wq,保存并退出
    3)进入 conf.d

    cd conf.d
    

    4)创建并配置你的conf文件

    sudo touch mysite.conf
    
    sudo vim mysite.conf
    
    server {
        listen       8090;#端口号,按自己喜好
        root     "~/websites/";#改为你dist文件夹的绝对路径,比如:/home/web/websites/mysite/dist/
        location / {
        #    root   html;
            index  index.html index.htm; # 默认加载的文件名
        }
    }
    

    8.重新启动下nginx

    sudo nginx -s reload
    
    展开全文
  • vue项目部署到服务器

    千次阅读 2018-11-29 16:24:59
    1、连接服务器 ssh -p 端口号 root@ip地址  输入服务器连接密码   2、安装node https://nodejs.org/zh-cn/download/ uname -a 查看linux版本,选择对应的node版本 cd /usr/local 下载  wget ...

    mac、ubuntu

     

    1、连接服务器

    ssh -p 端口号 root@ip地址 

    输入服务器连接密码

     

    2、安装node

    https://nodejs.org/zh-cn/download/

    uname -a 查看linux版本,选择对应的node版本

    cd /usr/local

    下载 

    wget https://nodejs.org/dist/v10.14.0/node-v10.14.0-linux-x64.tar.xz

     解压

    tar -xvf node-v10.14.0-linux-x64.tar.xz

    重命名

    mv node-v10.14.0-linux-x64 nodejs

    建立软连接

    ln -s /usr/local/nodejs/bin/node /usr/local/bin

    ln -s /usr/local/nodejs/bin/npm /usr/local/bin

    查看node版本

    node -v

    npm -v

     

    3、git下载代码

    3.1 上传代码到github

    可参考文章:https://www.jianshu.com/p/5a887e99af55

    新打开一个命令窗口

    comman t

    cd 需要上传到文件目录

    git init

    git add .

    git commit -m "init"

    git remote add origin https://github.com/xxx/xxx

    git pull origin master

    git push -u origin master

    3.2 服务器拉取代码

    切换到连接服务器的窗口

    cd ~

    git clone https://github.com/xxx/xxx

     

    4、安装依赖

    cd code

    npm i     (如果未成功可以尝试  cnpm i)

     

    5、编译

    npm run build

     

    6、启动服务器

    nohup node prod.server.js &

    输入ip:port即可打开网页

     

    7、nginx配置多项目部署方案

    7.1  安装nginx

    参考文章:https://www.cnblogs.com/horizonli/p/5359861.html

    7.2  配置nginx

    cd /usr/local/nginx/conf

    vim nginx.conf

    server里面更改:

           server_name  改为自己的域名  

           location / {

               rewrite ^/ https://***/***;

            }

            location /sell/ {

               proxy_set_header X-Real-IP $remote_addr;

               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

               proxy_set_header Host $http_host;

               proxy_set_header X-Nginx-Proxy true;

               proxy_pass http://127.0.0.1:****/;

            }

    nginx修改后需要更新配置

    nginx -s relaod

    7.3 项目文件作相应对应路径修改

    1)静态文件css等的相对路径,需要修改vue.config.js

    添加 baseUrl: ' '

    8、启动

    启动本地服务127.0.0.1:****  node prod.server.js

    启动线上服务  nohup node prod.server.js & 

     

    展开全文
  • 本篇文章主要介绍了Vue 项目部署到服务器的问题解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 前端VUE项目部署到服务器

    千次阅读 2021-01-04 16:47:22
    前端VUE项目部署到服务器 具体步骤: 一、先运行前端VUE项目的“build”任务,会得到一个“dist”打包文件。 二、在项目文件夹同级目录下新建文件夹“XXX_severe”。例如我的项目名称为“shop”,那么我在与“shop”...

    前端VUE项目部署到服务器

    具体步骤:
    一、先运行前端VUE项目的“build”任务,会得到一个“dist”打包文件。
    二、在项目文件夹同级目录下新建文件夹“XXX_server”。例如我的项目名称为“shop”,那么我在与“shop”同级目录下新建一个叫“shop_server”的文件夹。创建好之后用VScode打开。
    三、在VScode中打开终端(Ctrl+Esc下方的键),在终端中运行npm init -y,然后运行npm i express -s,可以看到此时文件夹中多了一几个文件:
    在这里插入图片描述

    将“dist”文件复制进“shop_sever”文件夹中。

    四、将“dist”打包文件部署到服务器端,即可通过服务器访问该项目。(注:在访问之前必须先启动服务器)

    (1)在VScode中新建一个文件(在根目录中新建),名称为:app.js

    在这里插入图片描述

    (2)在该文件中写入一下代码:

    // 1.导入服务器
    const express = require('express')
    
    // 2.创建web服务器
    const app = express()
    
    // 3.托管静态资源
    app.use(express.static('./dist'))
    
    // 3.启动web服务器(80为端口号)
    app.listen(80,() => {
        console.log('server running at http://127.0.0.2')
    })
    

    五、启动服务器:在终端窗口中输入node .\app.js来启动服务器,此时可以通过对应服务器地址(http://127.0.0.2)来访问项目。(注意:这里就是上面说的,要想成功访问服务器,必须先执行此操作,不然服务器会拒绝访问!)。关于服务器管理还可以使用pm2来进行管理,具体操作见博主另一篇文章传送门

    展开全文
  • vue项目部署到服务器

    万次阅读 多人点赞 2019-09-02 11:38:28
    在前面的文章里面,自己做了一个练手的小项目,买了服务器之后,也对linux的命令有了初步的认识和理解,现在开始把做好的项目部署到服务器上,通过域名来访问。 Vue项目从搭建环境到打包上线 ...1:使用npm run build...

    在前面的文章里面,自己做了一个练手的小项目,买了服务器之后,也对linux的命令有了初步的认识和理解,现在开始把做好的项目部署到服务器上,通过域名来访问。

    Vue项目从搭建环境到打包上线
    https://www.jianshu.com/p/7791bf749f66

    1:使用npm run build进行打包

    打包完成显示

    这个时候可以看到项目里面多了一个dist文件夹

    2:打开dist/下的index.html

    这个时候
    直接把dist文件拿出来,在浏览器里面没有办法访问

    修改config/index.js里的assetsPublicPath的字段,初始项目是/,现在改为./

    需要修改dist下的index.html资源路径为./
    打开dist底下的index.html文件,修改文件路径

    通过浏览器打开,可以访问

    ###3:项目打包处理完成,打开服务器连接工具,连接到自己的服务器
    将dist文件扔到服务器,最简单粗暴的方式,根据index.html路径访问即可。(当然后面还要继续利用nginx搭建静态资源服务器)

    好了,打开自己的域名+项目index.html路径就可以访问啦,这个时候,我们的静态资源vue项目部署到服务器上了。

    展开全文
  • Vue 项目部署到服务器

    千次阅读 2020-04-07 16:46:20
    Vue 项目部署到服务器上打包上传注意FlashFXP配置编辑器 打包 在项目终端输入打包命令:cnpm run build。 之后在项目会多一个dist的文件夹,就是打包好的文件夹。里边有一个static和index.html 向服务器上传这个...
  • 估计后续我VUE写完,也没人负责把网页部署到服务器上,那么咋办,只能自己来了。对于服务器来说,可以说是一个小白了。可以说什么都是从0开始。这篇文章不说VUE怎么怎么写,1、购买腾讯云免费服务器腾讯云打钱??????...
  • 一、业务描述:最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢?二、部署(1)首先在本地测试项目可以启动并且能正常运行。(2)在项目中输入npm run build此时会生成一...
  • 相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入生产环境,编译打包后,放入服务器项目就不正常了,会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张,...
  • Vue项目部署到服务器通过公网IP访问 一、vue项目打包 1.打包项目及修改文件 ​ 在本地的项目完成后,可能需要将其部署到服务器上,并且通过公网IP就可以访问到这个项目,下面介绍一下具体的部署流程。 ​ 首先将写...
  • 关于vue项目部署到服务器不兼容ie问题问题表述解决方法安装配置 问题表述 webpack打包vue项目放到服务器上用其他浏览器:谷歌,火狐打开没问题,用2345,360打开却是空白页,作为一个小白一脸蒙圈;几番麻烦度娘才...
  • 最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢? 二、部署 (1)首先在本地测试项目可以启动并且能正常运行。 (2)在项目中输入npm run build 此时会生成一个...
  • vue项目部署到服务器nginx(超简单)

    万次阅读 2019-06-30 11:51:42
    nginx服务器是一个轻量级、又简单的服务器,所以,对我来说,部署我的vue项目就选择它了。 首先,下载nginx服务器,官网下载地址http://nginx.org/en/download.html。我选择的是1.8.1版本。 下载完后,解压...
  • Vue 1.在服务器安装nodejs和npm,打开服务器的terminal。 sudo apt-get install nodejs sudo apt install nodejs-legacy sudo apt install npm 2.设置镜像源 sudo npm config set registry ...
  • 如果之前vue项目部署服务器之后正常运行,而在之后更换域名再部署,就出现接口404的状态的话,有两种情况。 一:有可能是vue中的配置有问题,这个需要去重新设置vue的接口地址配置的问题。 二:nginx中的配置没...
  • 1、在vue项目中解决 在入口文件index.html添加: <meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta ...
  • 实践中我发现vue项目部署到服务器一共有两种方式,当然也有可能有别的方法。 一.将vue项目打包后生成的dist目录下的文件复制到springboot项目里面 1. 前端vue项目先通过npm run build生成dist目录 2.将dist...
  • 第一步:打包vue项目 npm run build vue项目下回出现一个dist文件夹 将打包好的dist文件夹移动你的服务器中 安装nginx并启动 下载安装包 cd /usr/local (切换路径) wget ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,956
精华内容 782
关键字:

vue项目部署到服务器

vue 订阅