精华内容
下载资源
问答
  • 主要介绍了Vue项目打包部署到iis服务器的配置方法,文中通过代码示例给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 项目遇到个情况,npm run build打包之后上传到服务器后,正常进入,但是刷新页面就是出现空白页,然后百度找了原因,是路由问题1.路由模式将histroy改成hash模式,起初 mode:'history’ const router = new Router...

    项目遇到个情况,npm run build打包之后上传到服务器后,正常进入,但是刷新页面就是出现空白页,然后百度找了原因,是路由问题
    1.路由模式将histroy改成hash模式,起初 mode:'history’
    在这里插入图片描述

    const router = new Router({
    base: '/',
    mode: 'hash',
    routes: ROUTES
    })
    
    const router = new Router({
    base: '/',
    mode: 'hash',
    routes: ROUTES
    })
    

    2.那么vue-router的hash模式和histroy模式有什么区别呢?

    1、hash模式url带#,histroy模式url不带#

    2、hash模式解决了通过http请求来切换页面,改变路径可以直接改变页面,无需进行网络请求,这叫前端路由,在hash模式下改变的是#中的信息,

    history模式,可以前进和后退,但是不能刷新页面,刷新之后就会报错。如果后端没有对路由地址进行相应的处理,那么就会报404的错。

    3、hash浏览器支持率比较好,支持低版本的浏览器,但history的方法只支持部分浏览器。

    大家可以参考vue-router官方文档
    https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

    展开全文
  • vue项目开发完要部署时 1.修改该项目config-index.js文件 2.在该项目目录下运行npm命令npm run build 3.将生成的dist文件放至tomcat服务器webapps目录下运行即可。 ...

    当vue项目开发完要部署时

    1.在该项目目录下运行npm命令npm run build

    2.将生成的dist文件放至tomcat服务器webapps目录下运行即可。

    展开全文
  • 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项目打包后通过百度的BAE发布到网上的流程,主要运用的技术是vue+express+git+百度的应用引擎BAE。需要的朋友可以参考下
  • vue项目打包发布踩过的坑

    千次阅读 2018-11-13 11:20:43
    2.vue写成懒加载的方式,打包发布部署到服务器报错,修改为下面的内容config目录下的index.js的assetsPublicPath修改为下面的内容 3.vue从后台获取数据时,串接口数据,保存sessionid,vue中登录成功后台自动将...

    1.vue打包之后,背景图片不显示问题
    找到build/utils.js文件
    修改成为如下所示内容:
    在这里插入图片描述
    2.vue写成懒加载的方式,打包发布部署到服务器报错,修改为下面的内容config目录下的index.js的assetsPublicPath修改为下面的内容
    在这里插入图片描述
    3.vue从后台获取数据时,串接口数据,保存sessionid,vue中登录成功后台自动将token保存进入session缓存,解决前端每次生成的token不同与后端保存的不一致,无法访问下一个接口的问题。

    axios.defaults.withCredentials = true;
    

    4.vue与后台api接口的交互–axios的应用
    参考原作者:https://blog.csdn.net/joyce_lcy/article/details/78873733
    (1)安装axios

    npm install axios --save-dev
    

    (2)修改原型链

    import axios from 'axios
    Vue.prototype.$ajax = axios
    

    (3)在组件中引用

    mounted(){
    
        //GET
        this.$ajax({
          method: 'get',
          // url:'../static/test/getInfo.json', //<---本地地址
          url: '/api/drummer/8bd17859',
        }).then(response=>{
          let _data=response.data;
          alert("hello," + _data.username);
        }).catch(function(err){
            console.log(err)
        })
    
        //POST
       this.$ajax({
           method: 'post',
           url: 'http://127.0.0.1:8080/edsf-sgc/webapi/user/login',
           data: {'loginName': 'k00000', 'pwd': '123456'},
           headers: {
            'Content-Type': "application/json" // 解决跨域问题
           }
          }).then(response => {
           this.$router.push({name: 'servePersonView'});
          }).catch(function (err) {
           console.log(err);
          })
    

    (4)为了解决浏览器的兼容问题,安装es6-promise

    npm install es6-proimse --save-dev
    main.js中引入
    import Es6Promise from 'es6-promise'
    Es6Promise.polyfill();
    

    5.Vue项目 测试、发布root地址配置
    (1)prod.env.js
    在这里插入图片描述
    (2)prod.env.js
    在这里插入图片描述
    (3)index.js的配置
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    (4)在main.js中进行配置

    import axios from 'axios';
    Vue.prototype.baseURL = process.env.API_ROOT;
    axios.defaults.withCredentials = true ;
    引用的时候直接使用this.baseURL +api地址 即可
    

    6.echart图data数据部分动态获取后台数据
    先从后台获取到值,然后再给option添加seris的属性,最后再做绘图的操作
    在这里插入图片描述

    展开全文
  • Vue项目打包部署总结

    万次阅读 多人点赞 2020-12-13 16:39:40
    关注公众号前端开发博客,回复“加群”加入我们一起学习,天天进步作者:沐码链接:https://wintc.top/article/29使用Vue做前后端分离项目时,通常前端是单独部署,...
  • 今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • 项目开发阶段和生产环境可能不一样 如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成...
  • vue项目打包发布后接口报405错误

    千次阅读 2021-02-04 14:10:52
    vue项目打包发布后接口报405错误 vue项目前端做了代理打包后后台不识别报405 not allowed vue.config.js文件配置 devServer: { // host: "0.0.0.0", //项目运行时的本地地址 // port: 8880, // 端口号 //proxy:{...
  • 将style样式中的scope字段去除,就能在全局生效,Vue项目CSS样式恢复正常。
  • 1:修改config下的index.js文件,将输出路径由绝对路径改为相对路径 2;修改build文件夹下utils.js文件 3:注意,如果路由使用的是history模式则还是会空白,需要在服务器端设置匹配不到路由则跳转到index.......
  • 1、项目打包路径配置 将绝对路径改为相对路径 目标文件:项目目录 > config文件夹 > index.js assetsPublicPath:'/' 改为:assetsPublicPath:'./' (加一个点变为相对路径) 2、配置背景图片等静态文件...
  • vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,为什么明明本地项目中有这个文件而推上去就没有了呢? 这里会先介绍.gitignore,不想看的 请直接跳过介绍 看...
  • vue项目打包发布上线

    2021-11-03 22:03:19
    vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一、运行打包命令 npm run build //一般情况如果不改的话都是build 运行后生成 ...
  • 问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到; 解决方法: 主要是需要单独为 css 配置 publicPath 。 ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独...
  • 小编给大家通过本文详细介绍了关于vue.js项目的构建、打包发布的全过程,文章很以后价值,值得你参考。
  • Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。 必须要...
  • 1、先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:”../../” , 这样写是处理打包后找不到静态文件的问题)...
  • VUE项目打包发布

    2020-08-12 16:38:39
    VUE项目打包发布 1、在webstrom命令行中输入:npm run build 2、在输入:npm install -g test01 3、输入:test01 dist 4、在浏览器中输入: http://localhost:5000 ,可以访问到页面
  • 1 创建vue 项目 1.1 安装基本环境 1.安装vue和node.js 的express 2.这里假设都安装完npm和node.js环境 vue3.0 安装 npm install -g @vue/cli 1.2 vue3.0创建项目 vue create my-project cd my-project npm run ...
  • 一、Vue项目打包 Vue项目完成后,需要打包上线。打包只需要执行命令npm run build即可,但有两点需要注意的地方,否则就会出现空白页或图片不显示问题。 ① 修改路径位置,解决空白页问题。  修改位于项目目录中...
  • Vue项目部署线上后页面空白 这里将路由模式改成hash模式 const router = new VueRouter({ base: '/', mode: 'hash', routes, }) export default router 在Vue2.6 版本 vue.config.js 文件是需要我们自己创建的 ...
  • Vue_打包发布项目

    千次阅读 2019-09-17 22:35:25
    一、 打包vue项目步骤: 1、对当前vue项目进行打包的...二、 使用静态服务器工具包发布打包vue项目 1、首先安装全局的serve,如下图: 2、使用serve运行打包文件 命令如下:serve + 打包文件名 serve dist ...
  • 项目打包发布到nginx
  • Nginx基础配置和vue项目打包发布

    千次阅读 2019-09-19 19:07:36
    vue 项目打包发布 打包后的vue项目直接放在自定义的服务器位置,注意创建一个和本地项目同名的文件夹,记住服务端的dist的目录,用于在Nginx配置代理使用。 服务器的链接请参考:...
  • 记一次vue项目打包发布过程

    千次阅读 2019-01-24 14:31:28
    vue项目打包: npm run build 文件当中的图片引用,包括css类的背景图片类都应该用import引入,然后写在data当中,视图再动态绑定。不能直接写在css里 打包之后在服务器上部署: 从服务器获取资源或者文件,得先在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,473
精华内容 7,389
关键字:

vue项目打包发布

vue 订阅