精华内容
下载资源
问答
  • vue部署到服务器后有路由的情况刷新提示404 因为路由使用的是histroy模式 需要进行以下配置 在Nginx管理中进行配置 listen 80; server_name 100.0.0.0; index index.html index.htm index.php; root /...

    vue部署到服务器后有路由的情况刷新提示404

    因为路由使用的是histroy模式
    需要进行以下配置
    在Nginx管理中进行配置
    在这里插入图片描述

    	listen 80;
            server_name 100.0.0.0;
            index index.html index.htm index.php;
            root  /www/wwwroot/vue_show;
    
            #error_page   404   /404.html;
            include enable-php.conf;
            location /host/
            {
               proxy_pass http://100.0.0.0:0000/;
            }
            location /
            {
                index index.html index.htm index.php;
                root  /www/wwwroot/vue_show;
                try_files $uri $uri/ @rewrites;
            }
            location @rewrites
            {
              rewrite ^(.+)$ /index.html last;
            }
    

    配置后重启Nginx(在Nginx管理中服务里重启)

    前端的baseURL也需要对应进行修改
    axios.defaults.baseURL = "http://100.0.0.0/host/"
    IP/host的形式,与上面配置保持一致。

    • 跨域一开始用了vue.config.js里配置的方法,不知道为啥部署了就不行了。
    module.exports = {
        devServer: {
            proxy: {  //配置跨域
              '/api': {
    		//后台接口
                target: 'http://100.0.0.0:0000',  
                changOrigin: true,  //允许跨域
                pathRewrite: {
                  '^/api': '' 
                }
              },
            }
          },
    }
      
    
    • 有知道的大佬麻烦留言告诉我下。在此谢过。
    展开全文
  • Linux服务器部署vue项目

    万次阅读 多人点赞 2018-09-09 20:32:52
    最近刚新公司,正好之前没接触过这方面的东西。最初仅仅是猜想。最后也没想到Tomcat真的可以部署前端页面 好,我先来。新建一个vue项目。 //详细的怎么创建。我这里就不说了。 vue init webpack vuetest ...

    最近刚到新公司,正好之前没接触过这方面的东西。最初仅仅是猜想。最后也没想到Tomcat真的可以部署前端页面

     

    好,我先来。新建一个vue项目。  // 详细的怎么创建。我这里就不说了。

    vue init webpack vuetest

    得到的项目目录

    执行,

    npm run build   // 进行打包操作
    

    当最后看到这样代表打包成功

    此时你可连接服务器。我这里用的是 xshell 工具,注明:工具无所谓。链接上就可以(给小白看的)

    出现此画面,连接成功

    下载Tomcat

    各位可以选择两种方式:

        1.在Windows上下好传过去。// 自己百度传的方式。我这里不教

        2.wget 后面跟上下载路径即可

    我选择第二种

    wget http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-7/v7.0.90/bin/apache-tomcat-7.0.90.tar.gz

    执行以上命令

    // 提醒一点。Tomcat需要Java支持。我随后会发布安装Java的教程。

    此时下载是一个tar.gz的压缩包

    tar -zxcf apache      // 后面按一个tab他会自动补全

    随后我们cd 进到目录

    此时我们到达Tomcat的bin目录中。。。接下来执行ls查看一下。当前目录下有哪些文件

    我们经常需要用到的两个文件。我已经在图中全出

    名字顾名思义  : startup.sh  // 开启的        shutdown.sh     // 关闭的

    执行sh脚本    

    bash startup.sh

    看到的是这样的字样。那么代表启动成功

    好接下来我们回到vue

    打包后。会生成一个dist目录  // 里面两个东西,一个static 文件夹    还有一个index页面   这个是vue帮助我们生成的

    文件夹xshell不支持上传。所以我这里把他打成一个压缩包

    回到Linux

    我们进入Tomcat根目录的webapps文件夹

    把刚才打压缩包的dist目录移上去

    可以看到。我的这个文件已经上来了

    然后解压他:  // 怎么解压自行百度。。  安装unzip什么的。。自己百度

    unzip dist.zip

    现在。你就可以在的浏览器上输入你的ip。

    http://xxx.xxx.xxx.xx:8080/dist/

    这个时候你的项目就可以跑通了

    不过此时你会发现一个问题。。访问以后是白屏

    解决办法:

    打开vue项目根目录的config目录

    把这两处改为   ./

    改完保存。打包,把webapps目录下的dist删掉。把这个打包过的替换上。就可以访问了。

    此章完结。。个人记录。帮助迷途中的小白。。本人技术有限。勿喷谢谢

    ===========================

    以上 项目创建方式是用vue cli2构建的项目   下方更新vue cli3修复白屏问题

    ============================

    打开这个文件。

    将这里改成 

    publicPath: '',

    再次打包就好

    展开全文
  • 对于Vue这种前端Web项目我们一般都部署linux系统上,Linux常见的Web应用服务器有Apache、Nginx和Tomcat 。Nginx是一款高性能、低消耗的轻量级反代理服务器很适合中小型项目,这里选择Nginx服务器部署Vue项目。...

    项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上。对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache、Nginx和Tomcat 。Nginx是一款高性能、低消耗的轻量级反代理服务器很适合中小型项目,这里选择Nginx服务器来部署Vue项目。

    92ac7aef18a3507a7acb9829e5367f68.png

    打包Vue项目

    项目发布之前我们需要先将项目进行打包,Vue脚手架是利用webpack将前端代码通过编译、压缩,合并等操作,将代码进行整合优化并生成浏览器可直接识别的文件(如html,css,fonts、img、js等)。具体的打包介绍可以参考文章【Vue实战074:你真的了解了项目打包么?来普及下吧!】,这里我们直接通过命令:npm run build对vue项目进行打包,打包之后会在项目根目录生成一个dist 文件夹用来存放打包编译的文件。

    5e57c1414928efa5b6c5a8e763897721.png

    Callback was already called错误

    Vue-cli3.0在打包的时候会自动将js和css分开打包,把所有的css样式打包成一个个css文件。如果打包的时候遇到错误:Callback was already called,vue.config.js文件中配置css: {extract: false}}。该配置指定css是否使用分离插件ExtractTextPlugin(默认为true),将extract改成false则会将样式强制内联不生成单独的css文件。

    34dcc8e1f355a02cd528f81ac09b1274.png

    Nginx测试

    我们可以在Windows上用Nginx先测试下是否能正常的访问,在Windows使用Nginx可以参考文章【Nginx实战001:Window中配置使用Nginx入门 】。将打包好的项目拷贝到nginx的html目录中,启动nginx并在浏览器地址栏输入网址 http://localhost:80访问项目。

    64e781aa21536b802632e2c463884208.png

    Nginx服务部署

    在本地测试没问题我们既可以开始部署了,先在服务器上安装nginx。Centos安装Nginx跟Ubuntu安装基本一样,这里就不再重复了,有需要可以参考文章【Linux实战008:Ubuntu搭建Nginx服务器详细图解】。我们把打包好的文件上传到nginx的html目录中(该目录一般在/usr/share/nginx/html),利用finalshell等工具可以快速将文件上传到服务器指定目录。

    8d64356b0b317ffa40e4be2c43406a0a.png

    修改Nginx配置

    docker的nginx基础配置文件一般存放在/etc/nginx文件夹下的nginx.conf文件中,默认的配置default.conf也存放在这里。我们的服务器配置就放在default.conf中,用户可以根据自己的项目需求来配置nginx。通过vim修改好之后执行命令:wq保存退出,再执行命令:sudo ./nginx -s reload重启下nginx即可(docker可以重启容器)。

    5ad2ea1126fee969e80967e5a7b45553.png

    总结:

    Nginx默认配置的监听端口为80,如果当前端口已经被占用的话就可以在这里进行修改。具体的配置按照自己的项目需求进行修改,一般我们都在server中进行配置(一个server代表一个服务站点,可以配置多个server节点搭建多个站点)。以上内容是小编给大家分享的【Vue实战091:Vue项目部署到nginx服务器】。希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏:

    展开全文
  • 将koa+vue部署到服务器

    千次阅读 2019-02-27 21:29:00
    很久很久以前,就对前后端如何分离,后端如何把代码部署到服务器有浓厚的兴趣,最近在阿里云上申请了一个服务器,试试水吧! 本文参考了文章《基于Node的Koa2项目从创建打包服务器指南》 由于前端要调用后端...

    很久很久以前,就对前后端如何分离,后端如何把代码部署到服务器有浓厚的兴趣,最近在阿里云上申请了一个服务器,试试水吧!

    本文参考了文章《基于Node的Koa2项目从创建到打包到云服务器指南

    由于前端要调用后端接口,因此我们先介绍后端接口的开发

    1. 后端接口开发

    1.1 使用 koa-generator 脚手架开发

    npm install koa-generator -g  //安装koa-generator,利用koa-generator快速搭建Node.js服务器
    koa2  my-project  //新建一个叫做my-project的koa2项目
    cd  my-project    npm  install
    npm  start       //启动项目  
    localhost:3000  //打开 

    1.2 定义接口

    router.get('/getJson', async (ctx, next) => {
      ctx.body = 'json string'
    })
    
    router.get('/hello', async (ctx, next) => {
      ctx.body = {
        title: 'koa2 hello'
      }
    })

     

    2前端代码开发;

    2.1 脚手架的安装

    vue较好的脚手架是:vue-cli

    具体安装步骤,网上一搜一堆,给个链接:vue-cli(vue脚手架)超详细教程

    大概步骤:

    确保安装了node webpack

    npm install -g vue-cli //全局安装 vue-cli
    vue init webpack vue-demo //初始化项目
    cd vue-demo //切换到项目目录
    npm run dev //启动项目

    2.2 连接后端接口

    由于要请求后端接口,故要安装 axios

    mounted:function(){
        this.getData(); //初始化页面时,请求了两个接口 /getJson 和 /hello
      },
      methods:{
        getData:async function(){
          axios.get('http://localhost:3000/getJson').then((respone)=>{ //这里使用了异步函数 Promise 的then
            this.querydata = respone.data
          })
        let {status,data} = await axios.get('http://localhost:3000/hello');//这里使用了 async 和 await 
        this.two = data.title 
    } 

    问题一:这样执行后,发现报错: 提示无法跨域的问题。即两个端口不一样。

    方法一:修改前端代码:

    axios.get('/getJson').then((respone)=>{ 
            this.querydata = respone.data
    })

    同时修改config/index文件:

    proxyTable: {
          '/': {
            target: 'http://localhost:3000',
            changeOrigin: true,
            pathRewrite: {
              '^/': ''
            }
          }
    }

    即把每个请求,做一个代理;但是总觉得,处理跨域应该由服务端来做,因此有

    方法二:

    前端代码:

    const domain = 'http://localhost:3000'
    getData:async function(){
        axios.get(domain+'/getJson').then((respone)=>{
        this.querydata = respone.data
        })
    }

    后端代码,在app.js:

    const cors = require('koa2-cors');
    app.use(cors());

    参考文章: node.js 应答跨域请求实现

    这样一个最简单的请求后端接口的实例完成了,这时我们在前端执行 npm run build,  把生成的dist文件夹的内容,放入koa项目的public中:

    这时一般app.js中有:

    app.use(require('koa-static')(__dirname + '/public'))

    若没有,自己填写上,此时再次执行npm run dev,则服务端打开的 http://localhost:3000/#/ 自动成为前端的页面。(区分一下,前端的页面打开的是8080端口)

    至此,在本地已经可以跑起来 调用后端定义的接口了,那么接下来如何将其部署到服务器上呢?

    3.部署到服务器

    首先想到的是 本地客户端 执行 

    ssh root@39.105.97.173

    连接服务器,然后使用 scp -r ./* root@39.105.97.173:/root/www/  但是文件很多的情况下 这样很麻烦有木有?

    我们可以使用工具:Yummy FTP.app 来连接服务器,但是必须保证以下条件:

    1)安装nvm/node环境 ;

    2)更新yum源;

    [1] 首先备份/etc/yum.repos.d/CentOS-Base.repo
    mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup
     
    [2] 进入yum源配置文件所在文件夹
    cd /etc/yum.repos.d/
     
    [3] 下载阿里云的yum源配置文件,放入/etc/yum.repos.d/(操作前请做好相应备份)
    centos7
    wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
    [4]清理
    yum clean all
    
    [5]更新缓存
    yum makecache
    yum install tree -y
    yum update -y

    3)安装sshd   在云服务器 ECS Linux CentOS 7 下重启服务不再通过 service  操作,而是通过 systemctl 操作。 操作说明如下:

    查看状态:
    systemctl status sshd.service
    启动服务:
    systemctl start sshd.service
    重启服务:
    systemctl restart sshd.service
    开机自启:
    systemctl enable sshd.service
    关闭服务
    systemctl stop sshd.service
     

    下面表示已经开启:

    4)开启服务器控制器的 安全组配置 打开22端口

    5)

    注意下面:端口是22       协议选择SFTP

    4 启动服务

    通过上述方法,把 除了 node_modules 文件夹部署到服务器上,然后在该文件夹下,npm install,执行npm run dev。然后访问 http://39.105.97.173:3000/#/ (注意这里有端口),即可访问到部署的页面!!!

    转载于:https://www.cnblogs.com/xiaozhumaopao/p/10447123.html

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

    千次阅读 2020-06-16 21:04:21
    其中Xshell为终端连接工具,我们连接Linux服务器用的就是它,而Xftp则帮助我们在windows系统下和Linux系统进行文件传输,首先我们安装下载完两个软件以后,先打开Xshell,点击左上角新建,输入Linux服务器的主机号,...
  • 主要介绍了SpringBoot + Vue 项目部署上线到Linux 服务器,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue项目部署到服务器

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

    2020-12-10 11:49:43
    背景:ubuntu的linux系统,要把本地项目部署到公司的192.168.XX.XX服务器上。 基本经过的步骤有 ssh远程连接服务器 nginx配置 scp远程拷贝本地项目到服务器 具体指令 一、ssh 安装ssh-server sudo apt-get ...
  • springboot+vuelinux服务器部署

    千次阅读 2018-10-29 23:44:26
    linux服务器环境:jdk mysql  1.把vue的项目用npm run build命令打包,打包完成后,会生成dist文件夹. 2.打开springboot项目,在src/resources目录下新建一个static文件夹,将dist文件夹中的所有文件放static下. 3....
  • 部署SpringBoot,Vue项目到Linux服务器上 今天我们将SpringBoot项目打包Jar部署到Linux上就可以通过ip地址访问项目 我们先package打包项目 打包成功 将Jar上传到Linux服务器 用Xftp连接Linux服务器,放你想放的...
  • 超详细的Vue项目部署到Linux服务器

    千次阅读 2020-08-24 16:22:58
    1、部署服务器 一、配置阿里云端口 进入阿里云控制台,安全组 -> 配置规则 进入配置端口,开放了对应的端口,服务器才能访问。 二、安装Xshell和,Xftp Xshell用来连接服务器,Xftp用来上传或者删除文件,十分...
  • 多个Vue项目如何部署到服务器

    千次阅读 多人点赞 2020-10-21 20:28:46
    最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢? 二、部署 (1)首先在本地测试项目可以启动并且能正常运行。 (2)在项目中输入npm run build 此时会生成一...
  • vue项目部署到Linux服务器进行测试

    千次阅读 2019-05-14 15:31:14
    1、测试部署,于是未进行打包,直接将项目copy到服务器相关目录下。 2、进入项目根目录后输入命令“npm run dev” 报错“权限不够”。 3、修改文件权限,输入命令“chmod -R u+x .”,执行后再执行“npm run dev...
  • 步骤3:本地创建实例vue项目并上传github上 步骤4:CentOS7.5安装Git,并拉取代码 步骤5:CentOS安装node环境,并编译前端项目 步骤6:将编译后的静态文件放nginx中 步骤7:增加前端启动命令,简化流程 ...
  • 一、在express项目中安装中间件npm install --save connect-history-api-fallback 二、在app.js中引用中间件 var history = require('connect-history-api-fallback'); app.use(history()); ...
  • Vue项目打包部署到服务器Linux

    千次阅读 2020-10-29 14:12:19
    然后到服务器 二、服务器配置(nginx) 注:如果已经有nginx环境了的话直接第6小步 1、查看gcc版本 gcc -v 没有的话安装 yum -y install gcc 2、pcre、pcre-devel安装 pcre是一个perl库,包括perl兼容的正则...
  • 2.1 数据库部署可能出现的问题2.2 SpringBoot 项目打包上传三、服务器配置3.1 Nginx 基本配置3.2 Nginx 反向代理 SpringBoot 服务总结 前言 有了一个基于 ElementUI 的电商后台管理系统,在开发一个相似的后台就会...
  • Vue项目部署到服务器通过公网IP访问 一、vue项目打包 1.打包项目及修改文件 ​ 在本地的项目完成后,可能需要将其部署到服务器上,并且通过公网IP就可以访问这个项目,下面介绍一下具体的部署流程。 ​ 首先将写...
  • 这里使用两种方式将项目部署到服务器上,nginx和nodeJS(pm2进行管理),主要记录一下。 一.准备 服务器系统:CentOS7 1.将Vue项目进行打包 在项目根目录的命令行中输入npm run build 2.打包完成 打包完成后,会在...
  • 步骤1:Linux 安装docker 更新ubuntu的apt源索引 sudo apt-get update 安装包允许apt通过HTTPS使用仓库 sudo apt-get install \ apt-transport-https \ ca-certificates \ curl \ software-properties-...
  • 哈哈哈哈哈哈哈哈哈哈哈哈哈好开心,把项目部署到服务器上了!!第一次玩服务器,搞了我一整天。呜呜呜也是真的遇到了很多问题,不过最终都解决了!欧✌ 先看链接:http://139.196.105.1:8089/ 只要服务器没到期就...
  • VUE项目部署服务器

    2021-04-06 08:51:20
    下面就是部署到服务器,让我的博客项目公布在网上啦~~ 1.前端部署 1.1服务器准备 Nginx环境 后端接口——想要完全的效果提前部署好 1.2前端打包准备 终端运行命令 npm run build 其实它就是个静态文件,在哪访问都...
  • 本博客是总结本人在linux服务器上将vue项目部署到Nginx上的经历 一.准备好vue项目 1.安装vue环境 这部分参考我上篇的博客 https://blog.csdn.net/rongqwe/article/details/111990401 2.打包vue项目 进入你项目的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,497
精华内容 2,598
关键字:

linuxvue部署到服务器

linux 订阅
vue 订阅