精华内容
下载资源
问答
  • vue打包后的代码替换
    2021-10-08 20:20:01

    1、目的:vue+springboot 开放的同学,使用nginx代理,实现前后台分离部署

    2、问题:vue打包后的静态页面和文件直接由nginx代理访问没有问题,但是请求接口时是请求不到的。

    3、解决方案:

    a)配置nginx:

    server {
            listen       80;
            server_name  localhost

            location / {
                root   D:/static; #vue工程打包后的文件路径
                index  index.html;
            }
        location /api{    # 会将接口地址/api开头的全部替换文下边配置的地址
            proxy_pass http://localhost:8081/;            #接口服务地址  配置跨域
        }


           
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }

    b)vue 打包配置:

    配置var baseUrl = '/api';

    保证打包后,请求的接口地址以/ws 开头

    4、结果:

    请求成功。

    更多相关内容
  • Vue 打包部署上线

    千次阅读 2020-12-22 14:50:34
    1,VUE逻辑编写完成在当前项目下打包npm run build需要注意的是,当打包完毕,需要将入口的index.html的项目dist路径改成相对路径另外需要注意的一点是,一旦打包vue.js项目,需要确保项目内必须使用vue.js语法...

    1,VUE逻辑编写完成后在当前项目下打包

    npm run build

    需要注意的是,当打包完毕后,需要将入口的index.html的项目dist路径改成相对路径

    另外需要注意的一点是,一旦打包vue.js项目,需要确保项目内必须使用vue.js语法来写功能,比如a标签要替换成, 传统的window.location.href跳转页面也要换成this.$router.push({ path: '/home/first' })这种形式。

    2,建立要部署上线的前端文件夹,放入dist ,src(static),,index 三个文件

    3,登录centos系统,运行 chmod 755 /root/video_vue 对项目文件授权

    修改nginx 配置文件 vim /etc/nginx/conf.d/default.conf  增加下面的配置,这里前端服务默认监听80端口

    //后端管理系统入口

    server {

    listen8000;

    server_name localhost;

    access_log/root/myweb_access.log;

    error_log/root/myweb_error.log;

    client_max_body_size 75M;

    location/{

    include uwsgi_params;

    uwsgi_pass127.0.0.1:8001;

    uwsgi_param UWSGI_SCRIPT video_back.wsgi;

    uwsgi_param UWSGI_CHDIR/root/video_back;

    }

    location/static {

    alias/root/video_back/static;

    }

    location/upload {

    alias/root/video_back/upload;

    }

    error_page500 502 503 504 /50x.html;

    location= /50x.html {

    root/usr/share/nginx/html;

    }

    }//前端入库配置

    server {

    listen80;

    server_name localhost;

    access_log/root/video_vue_access.log;

    error_log/root/video_vue_error.log;

    client_max_body_size 75M;

    location/{

    root/root/video_vue;

    index index.html;

    }

    error_log/root/video_vue/error.log error;

    }

    需要注意的是端口不能重复监听,所以之前的django服务需要让出80端口,改成监听8000,而uwsgi服务也需要让出8000端口改成在8001端口运行服务

    4,mypro_wsgi.ini配置文件改端口(后台项目根目录下建立此文件)

    [uwsgi]

    chdir= /root/video_back

    module=video_back.wsgi

    master=true

    processes= 3socket= 0.0.0.0:8001vacuum=true

    pythonpath= /usr/bin/python3

    daemonize= /root/video_back/uwsgi.log

    5,重启nginx服务

    systemctl restart nginx.service

    完成访问测试

    收工!!!

    展开全文
  • 最全vue打包前后的跨域问题,绝对解决你的问题

    千次阅读 多人点赞 2021-10-12 17:22:55
    原理:打包后你在代码中配置的proxyTable不会被打包入dist文件中。所以要找一个外部的插件解决跨域问题。与本地环境下的proxyTable相同,nginx作为前端服务器,它的外部跨域插件非常好配置,可以直接下载使用。 ...

    [首先查看是否引入数据库文件,如果没有数据库文件,请求后浏览器显示的是跨域问题!先排除数据库文件有没有引入!]

    1.打包前的本地localhost:8080环境下可以用 proxyTable代理来解决跨域问题。[配置完成后重启项目服务]

    原理:用自定义名如'/api'来代替你请求数据的url地址,proxyTable会自动识别你数据请求url的地址,识别/api字符,然后将/api替换为你想要请求的原网址。

    "首先要确定你的vuecli是2还是3、4"


    vuecli2:

    在config目录的index文件中module.exports 的dev 中加入proxyTable代理。

    module.exports = {
      dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
    
        // Various Dev Server settings
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    
        proxyTable: {    //下面两个/api可以改成自己定义的名字
          '/api': {
            target: 'http://localhost:9900',  //你的数据请求地址(此处9900为举例)
            secure: true,    //如果是https,加入这句代码
            changeOrigin: true,     //同意跨域
            ws: true,
            pathRewrite: {
              '^/api': '',
            }
          }
        },
      }
    }

    当你用ajax或者axios时就可以将url中的/api变为proxyTable中target的路径,如:

    axios.get({
        url:'/api/wx/mymessage'  //proxyTable将/api变为http://localhost:9900
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })

    (若已使用axios.create封装,可以在baseURL前面加入/api),配置完成重新npm run dev


    vuecli3或4:

    在根目录的vue.config.js(没有这个文件可以创建)中加入proxyTable代理。

    
    module.exports ={
    devServer: {
            host: "0.0.0.0",
            port: 8082, 
            https: false, 
            open: true, 
            proxy: {            //下面两个/api可以换成自己定义的名字
               '/api': {
                    target: 'http://localhost:9900',  //你的数据请求地址(此处9900为举例)
                    secure: true,    //如果是https,加入这句代码
                    changeOrigin: true,     //同意跨域
                    ws: true,
                    pathRewrite: {
                          '^/api': '',
                        }
                 }
            }
        },
    }

    当你用ajax或者axios时就可以将url中的/api变为proxyTable中target的路径,如:

    axios.get({
        url:'/api/wx/mymessage'  //proxyTable将/api变为http://localhost:9900
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })

    (若已使用axios.create封装,可以在baseURL前面加入/api),配置完成重新npm run start


    到此解决了打包前的跨域问题

    2.打包后可以用nginx代理来解决跨域问题。

    原理:打包后你在代码中配置的proxyTable不会被打包入dist文件中。所以要找一个外部的插件解决跨域问题。与本地环境下的proxyTable相同,nginx作为前端服务器,它的外部跨域插件非常好配置,可以直接下载使用。

    nginx就是为打包的dist文件开启一个本地的localhost地址,配置好nginx后要打开nginx开启的localhost地址来运行打包文件,而不是直接打开dist里面的index文件。

    下载地址:nginx: download

     下载Stable version中的第三个也就是Windows版本就可以了,下载后解压。解压后文件中的exe文件可以直接运行nginx(会弹出一个cmd窗口然后消失,可以打开资源管理器查看服务是否启动)。

    在启动服务之前需要配置conf中的nginx.conf文件(配置完后在任务管理器关掉nginx后重新启动)。

    打包后根据请求地址不同可以分为以下三种情况:

    1、请求数据地址同样为本机开启localhost地址。(一般出现在练习环境下)

    2、请求数据地址为项目甲方未配置代理的内网服务器。(一般出现在项目对接环境下)

    3、请求数据地址为云服务器。【云服务器的商家一般都给自己的接口解决了跨域问题(直接https或者http请求就可以),一般可以直接请求】

    根据1和2情况的不同,nginx也有两种配置方式


    1、请求数据地址同样为本机开启的localhost地址。

    location /api {
             		rewrite ^/api/(.*)$ /$1 break;
             		proxy_pass http://localhost:8020;换成你的后端接口
             	}
    
    
    放一个方便复制的代码段
    
    

     再把源代码url:'http://localhost:9966/this/go'改为url:'/api/this/go'就可以了


    2、请求数据地址为项目甲方未配置代理的内网服务器。(一般出现在项目对接环境下)

     源代码中的请求地址该怎么写就怎么写,此处nginx不起替换作用,只是代理开启服务器。(不用担心这样改动会造成用户也需要配置nginx才能打开网页,这不是你要想的问题,这是服务器需要配置的问题)


    总结:vue产生跨域问题不只是前端问题,这个问题在后端也可以加注释块解决,但是后端解决会产生漏洞,增加网站被黑风险。不要认为这是前端或者后台应该做的工作。

    展开全文
  • vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成而想要打包成一份很简单, 只需要npm run build这个命令这两种命令的配置文件在config的index.js 一种是build 一种是dev ,而我们想要在本地...

    以vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成

    而想要打包成一份

    很简单, 只需要npm run build这个命令

    这两种命令的配置文件在config的index.js 一种是build 一种是dev ,而我们想要在本地查看打包后的成果,需要在assetsPublicPath 改变它的路径, 具体为什么,可以看index.html引入的文件路径

    之后只需要放在服务器上运行就好了。

    *常用技巧

    1.如果在config -> index.js 中的 build 代码中的 productionSourceMap的值设为false ,打包后文件体积可以减少百分之八十

    2.如果设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串,也就是版本控制

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 1、在static文件夹新建一个config.js,打包后生成的相同名文件夹,更改里面值就可以了 window.global_config = { BASE_URL: 'http://deuv.ulocuuuual.cn', // BASE_URL: 'http://192.168.199.178:700' }; 2、在...
  • vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,但是有的时候需要修改接口地址,为了避免为了修改接口地址而进行修改代码后再重新打包的...
  • 常规的vue项目分为本地环境和生产环境,我们只要对config文件夹下的dev.env.js和prod.env.js做相应的配置即可。但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的。如果每次都修改一个...
  • Vue打包上线的跨域问题处理

    千次阅读 2020-03-11 18:06:25
    由于开发环境和生产环境的不同,会导致vue访问出现跨域的问题。 一、开发环境跨域问题 1.config/index.js文件配置代理,找到proxyTable字段,如下面一样配置 dev: { // Paths assetsSubDirectory: 'static', ...
  • 反编译看到了之前编写的页面文件,但是没有其他内容,,做法是重新创建项目,替换新建项目中的src文件夹,,App.vue和实际项目中用到的vue.config.js需要格外再配置一下,,根据需求变动 CSDN
  • vue3项目打包附带混淆js

    千次阅读 2022-02-15 15:52:15
    使用打包插件:terser-webpack-plugin 安装 npm install terser-webpack-plugin --save-dev vue.config.js配置 const TerserPlugin = require('terser-webpack-plugin') configureWebpack: config => { if ...
  • Vue项目运行npm run build会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面,这个index就是最后单页面的最终文件。 有时候直接打包后,打开...
  • 最近在build打包vue项目遇到了几个问题,如下:1、npm run build打包项目之后,我们通常是把dist文件里面被压缩的static文件跟index.html提交到服务器,但最近发现直接打开index.html页面是空白的,还会报几个错,...
  • 最后开发完成想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到...
  • vue 打包失败

    2022-07-20 10:46:37
    vue打包失败
  • Vue打包优化持续更新
  • vue静态资源打包

    千次阅读 2020-09-02 17:31:41
    vue项目打包后,可能大家会注意到,会把一些文件都编译压缩到一起,但是打包后我们通常很难再去修改某些东西。 场景一:单点登录。当我们需要把部署包部署到不同的环境,但是有些环境往往不需要登陆的操作,那常规...
  • 本文介绍了Vue快速零配置的打包工具——parcel,分享给大家,具体如下: 特性 快速打包 打包所有资源 自动转换 代码拆分 模块热替换 友好的错误记录 如何工作 Parcel 将 资源 树转换成 包(bundles) 树。许多...
  • vue项目打包布署

    千次阅读 2022-06-18 12:56:20
    Vue项目打包部署本身不复杂,不过一些前端同学可能对服务器接触不多,部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题。一般我们在布署时,服务器已经...
  • vue打包js文件混淆加密保护

    千次阅读 热门讨论 2021-11-22 22:49:40
    部署到服务器上的vue项目在网页F12之后能看到源码,vue文件啦,js文件啦,都能看到,连我的注释都能看到,这能随便给别人看? 环境 vue 3 vue cli 4 webpack 4 解决方案 方案一 工具:“uglifyjs-webpack-plugin”...
  • 在搞资源文件全球加速时需要将 JS,CSS,IMG 等静态资源放到 CDN 服务器上,WEB 网站上引用CDN 上缓存的资源,因为网站用vue-cli 搭建的,所以需要对 vue-cli 配置文件 (vue-config-js) 进行修改,修改打包后的index....
  • vue打包模式

    2021-07-14 11:58:51
    为了在window和linux上都可以设置上临时的进程环境变量(也就是node打包时候所需要的环境变量),需要使用到cross-env做跨平台环境变量配置,配置代码可以在node_modules>.bin>cross-env下找到; 二、dotenv ...
  • vue项目打包后直接修改ip地址

    千次阅读 2021-05-07 09:33:46
    最近的项目遇到了私有化部署,ip地址不是唯一的,如果每次都修改完ip地址再打包再重新部署,实在是太繁琐了,身为程序员怎么能干这么累的活?这篇文章就是记录一下如何把ip地址变成可配置的,不用再重新构建代码久能...
  • 随着vue的流行,越来越多的项目使用了vue作为前端框架,项目中遇到需要将vue打包到spring boot 中的static中,直接访问,不需要使用nginx,我们的方式是保持前后端完全独立开发代码,项目代码互不影响,借助jenkins...
  • 二、配置打包出口路径 vue cli2.0代理配置 1、在cli2.0中项目中代理配置中主要集中在config文件中,找到config下面的index.js文件 。代理直接找到对应dev下面的proxyTable,具体配置就不做详细讲解了。废话少说,...
  • cordova+vue打包apk

    千次阅读 2022-03-01 18:14:08
    vue+cordova开发移动APP项目 一、环境(版本及配置) 1、node 12.13.1 执行命令查看版本 node -v 显示版本号则安装成功。 2、cordova 9.0.0 执行命令查看版本 cordova -v 显示版本号则安装成功。 3、vue cli 2.9.6...
  • 一、vue打包以后,配置文件修改全局接口地址? 在网上查了一下大概有两种方式,尝试了第一种并没有成功,但是结合着第一种的思路终于还是完成了.... 因为本人是刚进入前端的小白,所以做的小项目也比较简单,配置...
  • 在static下面创建一个js文件(随便...以上方法测试成功,run build打包项目可以让后端人员或者实施人员修改变量,满足其他需求。   参考博文: https://blog.csdn.net/qq_41409679/article/details/84878642
  • 现象: 排查思路: 1,package文件规定了版本号,出现不一致,应该是版本号出现了错乱 解决: 修改package.json 1,vue版本: 2,vue-template-compiler版本: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,020
精华内容 5,208
热门标签
关键字:

vue打包后的代码替换