精华内容
下载资源
问答
  • vue项目打包发布上线方法

    千次阅读 2020-10-09 16:29:56
    vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目。(以下以vue-cli脚手架生成的项目为例) 发布服务器 1、运行打包命令 npm run build 运行后生成dist文件夹,将dist文件夹...

    vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目。(以下以vue-cli脚手架生成的项目为例)

    发布服务器

    1、运行打包命令

    npm run build

    运行后生成dist文件夹,将dist文件夹发布在服务器中。

    我们在nginx中通过代理来访问:

    首先本地的代码在额米有打包之前:

     在执行npm run build之后会在本地项目的根目录下面生成一个dist目录:

     接着我们通过nginx代理来访问,NGINX配置如下:

    server {
            listen    80;
            server_name lch.vue.com;
            
            location / {
                proxy_pass http://127.0.0.1:8091;
                proxy_http_version 1.1;
                proxy_redirect  off;
                proxy_connect_timeout 30;
                proxy_set_header Host $host:$server_port;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                #proxy_cache cache_one;
                proxy_cache_valid   200 304 24h;
                proxy_cache_valid   any     10m;
                add_header  Nginx-Cache     "$upstream_cache_status";
                proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;

            }
    }

    server {
         gzip on;
        gzip_static on;
        gzip_min_length 50k;
        gzip_comp_level 1;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
            gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
        gzip_buffers 32 4k;
        gzip_http_version 1.0;
            listen    8091;
            access_log /var/log/nginx/lch.vue.com.log;
            server_name  127.0.0.1;
            location / {
                    root /htdocs/demo/vue-demo/dist;
                    try_files $uri $uri/ @router;
                    index index.html;
            }
            location ~ (favicon.ico) {
                    expires 365d;
            }
            location ~* \.(js|css|jpeg|jpg|bmp|gif|png|doc|docx|xls|xlsx|rar|zip|svg|otf|eot|svg|ttf|woff|woff2)$ {
                    root /htdocs/demo/vue-demo/dist/;
                    expires 30d;
            }
            location @router {
                    rewrite ^.*$ /index.html last;
            }

    }

    保存,重新启动nginx,当然了我这个是本地域名,需要绑定hosts:

     再次访问:lch.vue.com 可以看到如下的页面:

     

     这样的话vue前端项目打包通过Nginx代理就可以访问了。

     

    展开全文
  • 主要介绍了从零开始搭建vue移动端项目上线的步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 前言 给大家分享以下我是如何部署 SpringBoot + ...最近貌似 Vue3 正式版也发布了,正好有空看可以去看一看 提示:以下是本篇文章正文内容,下面案例可供参考 一、Vue 打包的项目如何部署? 1.1 Vue 项目打包 温馨提
  • 项目需求要想修改整体的后台接口域名,不用更改路径之后,每次发布都要打包部署。 参考:https://blog.csdn.net/qq_41772754/article/details/88106508 这个大神是真的写的很好,但是我自己引用的时候,出现了刷新...

    项目需求要想修改整体的后台接口域名,不用更改路径之后,每次发布都要打包部署。

    参考:https://blog.csdn.net/qq_41772754/article/details/88106508

    这个大神是真的写的很好,但是我自己引用的时候,出现了刷新就报错,然后不能用的问题。因为我做的项目基本弄完了,不好改动太多。就参照大神写的,改了。

    比较详细的解释说明请参照https://blog.csdn.net/qq_41772754/article/details/88106508  写的,他写的很详细的。下面是我自己写的,给大家一个参考:

    具体的方法如下:
    1.在项目中找到static文件夹,在里面创建一个配置文件,起名为config.js

    2.然后再src里面放axios的配置文件

     

    (api.js里面我放置的是跨域封装和接口拦截设置等,globalData里面放的是后台的接口) 

    下面就放api代码吧

    /* 1.引入文件 */

    import axios from 'axios' //引入 axios库

    import qs from 'qs' //引入 node中自带的qs模块(数据格式转换)

     

    /* 2.全局默认配置 */

    let baseURL

    // 判断开发环境(一般用于本地代理)

    if (process.env.NODE_ENV === 'development') { // 开发环境

    baseURL = glodApi.devUrl // 你设置的本地代理请求(跨域代理),下文会详细介绍怎么进行跨域代理

    // baseURL = window.Glob.BaseUrl

    } else { // 编译环境

    if (process.env.type === 'test') { // 测试环境

    baseURL = glodApi.BaseUrl

    } else { // 正式环境

    baseURL = glodApi.BaseUrl

    }

    }

    // 配置axios的属性

    const Axios = axios.create({

    baseURL: baseURL, // 后台服务地址

    timeout: 60000, // 请求超时时间1分钟

    //responseType: "json",

    withCredentials: false // 是否允许带cookie这些

    });

    // 可在此处配置请求头信息

    //config.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

     

    /* 3.设置拦截器 */

    Axios.interceptors.request.use((config) => {

     

    // 发送请求前进行拦截

    if (config.method == "post") {

    if (config.data.Params) {

    config.data.Params = JSON.stringify(config.data.Params)

    }

    config.data = qs.stringify(config.data)

    }

    return config;

    }, (error) => {

    console.log("错误的传参", 'fail');

    return Promise.reject(error)

    })

    //请求响应后拦截

    Axios.interceptors.response.use((res) => {

    if (res.status == 200) { // 对响应数据做些事

    if (Object.prototype.toString.call(res.data) === '[object Object]' && res.data.ReturnList == null) {

    res.data.ReturnList = []

    }

    if (res.data.ReturnCode == 0 || Object.prototype.toString.call(res.data) !== '[object Object]') {

    return res.data

     

    } else {

    return Promise.reject(res)

    }

    }

    return res;

    }, (error) => {

    //alert("网络异常!") 404等问题可以在这里处理

    return Promise.reject(error)

     

    })

     

    function sysApiUrl(api, data) {

    return Axios({

    url: api,

    method: "post",

    headers: {

    'Content-Type': 'application/x-www-form-urlencoded' //设置请求头请求格式form

    },

    data: data

    })

    }

     

    export default {

    axios_http(url, params) {

    return sysApiUrl(url, params);

    },

    }

    在界面上引用:

    我在main.js全局引用了sysApiUrl

    所以在界面上用this.$.....就好了

     

    ps:也可以用另起一个js文件,里面直接写封装的axios

    // index.js

    界面上:

     

     

    url:'/login'

    data:传给后台的参数 

    展开全文
  • 这是我写好的项目(后台管理:admin,前台展示:web,服务端:server) 1. 生产环境编译 1.修改axios的baseURL const http = axios.create({ // baseURL: http://localhost:3000/admin/api baseURL: process.env....
  • 主要介绍了将vue项目打包后通过百度的BAE发布到网上的流程,主要运用的技术是vue+express+git+百度的应用引擎BAE。需要的朋友可以参考下
  • vue项目部署上线

    千次阅读 2019-07-03 15:48:21
    公司做的oa项目之前是用的dwz框架,后来领导嫌弃页面太难看,然后就重新做了一版,用的是vue-element-admin 地址 github:https://github.com/PanJiaChen/vue-element-admin 官网:...

    公司做的oa项目之前是用的dwz框架,后来领导嫌弃页面太难看,然后就重新做了一版,用的是vue-element-admin

    地址

    github:https://github.com/PanJiaChen/vue-element-admin
    官网:https://panjiachen.github.io/vue-element-admin-site/zh/
    预览地址:https://panjiachen.github.io/vue-element-admin/#/dashboard

    用这个框架前,需要安装node.js环境(npm包管理器),此部分就不写了,自行百度

    目录结构

    在这里插入图片描述

    安装

    在这里插入图片描述
    测试环境:
    npm run dev 运行的是测试环境,测试环境能调用接口,需要在文件中配置代理,在dev中配置,如下图:
    在这里插入图片描述
    上面这样配置只是方便前端在开发的时候获取数据,正式环境需要配置服务器反向代理

    线上环境:
    npm run build 运行的是线上环境,线上环境能调用接口,需要在文件中配置代理,在build中配置,如下图:
    在这里插入图片描述
    运行npm run build前需要把assetsPublicPath 改成 ‘./’,防止生成以后的静态文件路径不对,运行完以后,项目路径中找到打包后的文件,在项目文件的dist文件夹下面的static和index.html就是打包后的文件,只要这部分拷贝到你的项目根目录下就可以了,我是直接在线上将域名配置到dist下面的

    配置线上反向代理

    把这个vue项目部署到线上网上查询了很多资料,都说要反向代理,说用nginx做反向代理,关键我们用的apache,网上查了好久没有查到对应的资料,就自己琢磨了,配置如下图:
    在这里插入图片描述
    ProxyRequests {On|Off}:
    是否开启apache正向代理的功能;启用此项时为了代理http协议必须启用mod_proxy_http模块。同时,如果为apache设置了ProxyPass,则必须将ProxyRequests设置为Off。

    ProxyPass [path] !|url [key=value key=value …]]:
    将后端服务器某URL与当前服务器的某虚拟路径关联起来作为提供服务的路径,path为当前服务器上的某虚拟路径,url为后端服务器上某URL路径。使用此指令时必须将ProxyRequests的值设置为Off。需要注意的是,如果path以“/”结尾,则对应的url也必须以“/”结尾,反之亦然。

    ProxyPassReverse [path] !|url [key=value key=value …]]:
    它一般和ProxyPass指令配合使用,此指令使Apache调整HTTP重定向应答中Location, Content-Location, URI头里的URL,这样可以避免在Apache作为反向代理使用时,。后端服务器的HTTP重定向造成的绕过反向代理的问题。

    < Proxy >容器
    < Proxy >容器用于封装一组proxy相关指令,这些指令主要用于设置访问权限、负载均衡成员组以及它们的属性。
    上图配置是指:
    访问oavue.com/api域下的所有请求转发给http://www.api.com代理

    AllowOverride all :支持url rewirte

    Options FollowSymLinks:在该目录中,服务器将跟踪符号链接。注意,即使服务器跟踪符号链接,它也不会改变用来匹配不同区域的路径名,如果在;标记内设置,该选项会被忽略

    Require all granted:允许所有请求访问资源

    此时访问oavue.com就可以访问网站了

    apache反向代理参考:https://blog.csdn.net/sforiz/article/details/79651643

    备注:assetsPublicPath 改成 './'后生成,部署到线上还是有的部分样式不显示,修改如下图,将红色部分true改为false,再重新run一遍即可,如下图:
    在这里插入图片描述
    至此vue项目部署上线完毕,哦也

    ps:有兴趣的可以关注下我的公众号和小程序,谢谢啦~~
    在这里插入图片描述在这里插入图片描述

    展开全文
  • 手把手教你VUE前端项目发布上线

    千次阅读 多人点赞 2020-06-25 10:00:16
    已经写好的代码,有团队的需要拉取最新的代码(今天重点分享团队前端项目发布过程) 软件:(包括但不限于)——如果工具都OK,将大大降低发布难度 Nginx:轻量级web服务器 Jenkins:持续集成开发工具 Tomcat...

    准备工作

    已经写好的代码,有团队的需要拉取最新的代码(今天重点分享团队前端项目的发布过程)

    软件:(包括但不限于)——如果工具都OK,将大大降低发布难度

    Nginx:轻量级web服务器

    Jenkins:持续集成开发工具

    Tomcat:轻量级的应用服务器

    Xshell:安全终端模拟软件

    VSCode:前端开发工具

    当然还有Maven、Gitlib、JDK,这些都是团队开发的必备工具

    基础知识:

    敏捷开发(Agile Development) 的核心是迭代开发(Iterative Development) 与 增量开发 (Incremental Development) 。这里具体什么是迭代开发,什么是增量开发我就不详细说了,但是这里说一点,虽然敏捷开发将软件开发分成多个迭代,但是也要求,每次迭代都是一个完整的软件开发周期,必须按 照软件工程的方法论,进行正规的流程管理。

    什么是持续集成

    持续集成( Continuous integration , 简称 CI )指的是,频繁地(一天多次)将代码集成到主干。

    持续集成的目的,就是让产品可以快速迭代,同时还能保持高质量。它的核心措施是,代码集成到主干 之前,必须通过自动化测试。只要有一个测试用例失败,就不能集成。

    通过持续集成, 团队可以快速的从一个功能到另一个功能,简而言之,敏捷软件开发很大一部分都要归 功于持续集成。

    根据持续集成的设计,代码从提交到生产,整个过程有以下几步。

    提交

    流程的第一步,是开发者向代码仓库提交代码。所有后面的步骤都始于本地代码的一次提交 (commit)。  

    测试(第一轮)

    代码仓库对commit操作配置了钩子(hook),只要提交代码或者合并进主干,就会跑自动化测试。

     

    构建

    通过第一轮测试,代码就可以合并进主干,就算可以交付了。

    交付后,就先进行构建(build),再进入第二轮测试。所谓构建,指的是将源码转换为可以运行的实 际代码,比如安装依赖,配置各种资源(样式表、JS脚本、图片)等等。  

    测试(第二轮)

    构建完成,就要进行第二轮测试。如果第一轮已经涵盖了所有测试内容,第二轮可以省略,当然,这时 构建步骤也要移到第一轮测试前面。

     

    部署

    过了第二轮测试,当前代码就是一个可以直接部署的版本(artifact)。将这个版本的所有文件打包( tar filename.tar * )存档,发到生产服务器。

     

    回滚

    一旦当前版本发生问题,就要回滚到上一个版本的构建结果。简单的做法就是修改一下符号链接,指 向上一个版本的目录。

    持续集成流程(看完这个图你会明白点什么)

    项目本地Tomcat打包发布

    发布前先进行了本地发布的原因:在于这样可以检验自己项目打包后是否存在问题,如果在本地能够发布成功,那么在远程服务器上发布也一定没有什么问题。

    第一步:用前端开发工具打包(我是vscode

    npm run bulid

    第二步:启动Tomcat

    1.启动tomcat,直接双击startup就可以

    2.将打包好的应用程序放在tomcat的webapps目录下

    3.启动tomcat,进入Tomcat Web应用程序管理者,就可以看到放到tomcat目录下打包好的程序

    4.在Tomcat Web应用程序管理者页面直接点击刚刚的那个程序,如果页面加载出来,说明程序打包没有问题

    5.将自己的IP地址加上,这样其他人就可以访问到该程序了

    点击项目名称:/itoo-front-dev弹出下面的页面,代表本地发布成功

    小结:通过上面将打包好的代码部署到Tomcat本地服务器上的过程,可以很好的理解将代码打包到远程服务器,其实他们都是一个用途,就是将打包好的程序发布到服务器让其他用户都可以访问到

    远程发布

    第一步:用Jenkins软件对项目进行部署——打包、部署(这个相当于Tomcat本地部署中的打包和部署)

    1)登录Jenkins,创建新任务

     2)输入任务名称,选择自由风格软件项目

    3)项目配置

     4)添加构建命令:先下载依赖:npm install,打包:npm run build

     5)将打包好的程序部署到对应的服务器

    第二步:启动Xshell,并且连接到需要部署的服务器上去

    1)Xshell连接服务器

    2)选择要部署的服务器

    第三步:在Linux上下载安装Nginx

    可以参考相关教程:https://www.runoob.com/linux/nginx-install-setup.html

    第1步:下载Nginx,

    下载地址:wget http://nginx.org/download/nginx-1.9.9.tar.gz

    第2步:下载到服务器中的指定位置

    [admin@itoo4 src]$ tar -zxvf nginx-1.9.9.tar.gz

    第4步:进入到安装目录

    [admin@itoo4 src]$ cd nginx-1.9.9

    第5步:编译安装

    [admin@itoo4 nginx-1.9.9]$ ./configure
    
    [admin@itoo4 nginx-1.9.9]$ make
    
    [admin@itoo4 nginx-1.9.9]$ make install

    第6步:查看版本

    [admin@itoo4 nginx-1.9.9]$ nginx -v

    第四步:修改Nginx的配置文件

    配置文件详解:https://blog.csdn.net/weixin_42167759/article/details/85049546

    [root@bogon conf]#  cat /usr/local/webserver/nginx/conf/nginx.conf
    user root;
    worker_processes 2; #设置值和CPU核心数一致
    error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志级别
    pid /usr/local/webserver/nginx/nginx.pid;
    #Specifies the value for maximum file descriptors that can be opened by this process.
    worker_rlimit_nofile 65535;
    events
    {
      use epoll;
      worker_connections 65535;
    }
    http
    {
      include mime.types;
      default_type application/octet-stream;
      log_format main  '$remote_addr - $remote_user [$time_local] "$request" '
                   '$status $body_bytes_sent "$http_referer" '
                   '"$http_user_agent" $http_x_forwarded_for';
      
    #charset gb2312;
      #limit_zone crawler $binary_remote_addr 10m;
     #下面是server虚拟主机的配置
     server
      {
        listen 80;#监听端口
        server_name localhost;#域名
        index index.html index.htm index.php;
        root /usr/local/webserver/nginx/html;#站点目录
          location ~ .*\.(php|php5)?$
        {
          #fastcgi_pass unix:/tmp/php-cgi.sock;
          fastcgi_pass 127.0.0.1:9000;
          fastcgi_index index.php;
          include fastcgi.conf;
        }
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
        {
          expires 30d;
      # access_log off;
        }
        location ~ .*\.(js|css)?$
        {
          expires 15d;
       # access_log off;
        }
        access_log off;
      }
    }
    

    第五步:可能需要检查你是否有安装vim

    查看是否安装:rpm -qa|grep vim

    安装vim:yum -y install vim-enhanced

    第六步:Jenkins构建

    第七步:重启Nginx

    验证nginx配置文件是否正确

    方法一:进入nginx安装目录sbin下,输入命令./nginx -t

    看到如下显示nginx.conf syntax is ok

    nginx.conf test is successful 说明配置文件正确!

    方法二:在启动命令-c前加-t

     

    重启Nginx服务

    方法一:进入nginx可执行目录sbin下,输入命令./nginx -s reload 即可

    方法二:查找当前nginx进程号,然后输入命令:kill -HUP 进程号 实现重启nginx服务

     

    其他命令:

    /usr/local/nginx/sbin/nginx -s reload            # 重新载入配置文件
    /usr/local/nginx/sbin/nginx -s reopen            # 重启 Nginx
    /usr/local/nginx/sbin/nginx -s stop              # 停止 Nginx

    展开全文
  • 小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程,文章很以后价值,值得你参考。
  • 打包上线 开发阶段 : npm run serve 发布阶段 : npm run build build之前 1. 把基准地址, 由开发阶段的换成发布阶段的 //main.js axios.defaults.baseURL = 'http://localhost:3000' 2. 忽略项目中打印的结果 // ...
  • 打开xsheel, 执行命令 pm2 log , 查看node启动时终端打印的错误消息 如果没问题, 显示的是端口号 访问线上接口 接口服务部署完成 部署前端项目 项目打包 上传到服务器上 使用nginx上线项目 由于项目和api接口所属...
  • 项目优化策略 生成打包报告 第三方库启用 CDN Element-UI 组件按需加载 路由懒加载 首页内容定制 1、生成打包报告 打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: ① ...
  • 1.打开build 文件夹webpack.prod.conf.js 2.写入配置 3.代码 // 打包去除console new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: true,
  • vue项目打包发布上线

    2021-11-03 22:03:19
    vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一、运行打包命令 npm run build //一般情况如果不改的话都是build 运行后生成 ...
  • vue项目打包上线的步骤

    千次阅读 2019-05-20 11:54:00
    1.修改配置文件一:build>>utils.js(修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./',修改目的是为了解决js找不到的...
  • 将打包好的代码打包上线 前端修改生产环境下的baseUrl 前端修改生产环境的 baseUrl .env.production VUE_APP_BASE_API = 'http://ihrm-java.itheima.net' 重新打包 使用 koa 框架部署项目 到现在为止,我们...
  • 项目优化策略 1.生成打包报告 2.第三方库启用CDN 3.Element-ui组件按需加载 4.首页内容定制 5.路由懒加载 1.生成打包报告 1.1通过vue-cli的UI面板直接查看 1.2通过命令行参数生成报告 // 生成report.html分析报告 ...
  • 项目中webpack配置的config/index.js,有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解 var path = require('path') 2 3 module.exports = { 4 build: { // production 环境 5 ...
  • 项目的优化和部署,项目开发阶段和上线以后有些地方可能不一样,接口可能会发生改变,还有上线以后不需要的文件,等一些问题存在,所以解决办法是,把入口文件分开,一个用于开发环境打包,一个用于上线以后打包 ...
  • vue项目打包上线后样式不生效

    千次阅读 2019-09-04 10:35:51
    引用 ... 将路由(router)先引入,导致自己修改的UI样式不起效果。 import 'element-ui/lib/theme-chalk/index.css' // element样式 import '@/assets/css/reset.css' // 全局或重置样式 ...
  • 如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成正式的接口 手动改动接口,既繁琐又...
  • VUE项目优化上线 优化 1、生成项目报告: vue-cli-service build --report 2、解决项目在打包后的console.log问题: 安装一个插件(babel-plugin-transform-remove-console)在项目build阶段移除所有的console...
  • vue项目发布路径问题

    2019-05-16 10:57:00
    那么可能是路径问题 打开config/index.js 修改assetsPublicPath: '/'为'./'即可 但是在本地环境localhost:8080运行又会出现问题,需要把路径改为原来的/ 现在找到了问题,但希望有一个统一的方式解决开发环境与...
  • SpringBoot + Vue 前后端分离项目集成部署前言一、Vue 打包的项目如何部署?1.1 Vue 项目打包1.2 使用 Express 代理静态资源文件二、SpringBoot 项目如何部署?2.1 数据库部署可能出现的问题2.2 SpringBoot 项目打包...
  • vue项目优化上线

    2020-12-01 20:55:13
    1.首先生成项目打包报告 可以通过vue的可视化工具中的build中生成 2.通过vue.config.js修改webpack的默认配置 2.1为开发模式和发布模式指定不同的打包入口 3.第三方库启用CDN 4.Element-UI 组件按需加载 5....
  • 主要介绍了详解关于vue2.0工程发布上线操作步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 开发环境的跨域可以直接在vue cofig中设置,这个没啥说的,打包完成后就一点关系都没了 解决方案: a.通过jsonp跨域 b.通过修改document.domain来进行跨域 c.使用window.name跨域 d.使用HTML5中新引进的window....
  • Vue项目上线到阿里云服务器 让别人都看得到 1.vue项目写完后的处理 傻瓜式的操作 跟着来超简单 配置全局路由 公共路径 在config文件下 找到 index.js 如下内容 请记住这个!!! assetsPublicPath 属性 对应的的/...
  • 1.vue-cli3打包上线项目完成得差不多得时候,就可以开始打包部署了。通常执行命令npm run build就可以完成打包,项目中生成一个dist文件夹。这个dist文件夹里面的东西就是我们前端的所有东西了。 2.vue-cli3打包...

空空如也

空空如也

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

vue项目如何发布上线

vue 订阅