返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue2webpackproxy与nginx配置方式
  • 913
分享到

vue2webpackproxy与nginx配置方式

vue2webpackproxy配置nginx配置vue2和nginx配置vue与proxy 2022-11-13 18:11:52 913人浏览 安东尼
摘要

目录一、项目打包后,elementUi图标显示为方框问题二、如何给项目添加ico图标三、proxy本地跨域配置四、Nginx配置提示:以下是本篇文章正文内容,下面案例可供参考 一、项

提示:以下是本篇文章正文内容,下面案例可供参考

一、项目打包后,elementUi图标显示为方框问题

解决:

修改build文件=》utils.js中的ExtractTextPlugin,加入 publicPath: ‘…/…/’,

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'Vue-style-loader',
        publicPath: '../../', //elementui图标显示不全问题
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

二、如何给项目添加ico图标

例如:

实现步骤:

1. 把icon图片放在项目的根目录下

2. build文件下的webpack.dev.conf.js 和 WEBpack.prod.conf.js 文件内搜索htmlWebpackPlugin;并加入favicon: './favicon.ico’代码

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: './favicon.ico'
    }),

三、proxy本地跨域配置

本人项目使用的是vue2+webpack技术栈,所以跨域是基于此技术栈之上配置。

// config文件=》index.js中proxyTable
proxyTable: {
      '/api': {
        target: 'Http://www.baidu.com:8080', // 此处为接口的真实地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
    },

之前想区分开发和生产环境的接口,所以在target使用了process.env.ROOT_URL,结果发现本地代理失败了,后面才知道在此文件内获取不到process;即使这样设置也是多余的,因为在项目打包后本地代理是没有失效的

接口封装文件相关配置,或者也可以在config文件=》的dev.env.js文件内添加BASE_API: ‘/api’,这里的baseURL配置process.env.BASE_API

var instance = axiOS.create({
  baseURL: '/api', //接口统一域名
  withCredentials: false,
  timeout: 5000, //设置超时
  headers: {
    'Content-Type': 'application/JSON;charset=UTF-8;',
  }
})

四、nginx配置

1. nginx=>conf=>nginx.conf文件配置

server {
        listen       8088; //端口号默认80,若是端口冲突,可以更改端口号
        server_name  localhost; //

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
        
        // 此处的 /api要和上面的接口封装处的baseURL一致,代理才有效果,之前被这个坑了好久
        location /api {
           rewrite ^/api/(.*) /$1 break;
           proxy_pass http://www.baidu.com:8080; // 此处为接口的真实地址
        }

2. 双击nginx文件夹下nginx.exe启动端服务

3. 浏览器输入 localhost:8088访问

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue2webpackproxy与nginx配置方式

本文链接: https://lsjlt.com/news/170012.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue2webpackproxy与nginx配置方式
    目录一、项目打包后,elementUi图标显示为方框问题二、如何给项目添加ico图标三、proxy本地跨域配置四、nginx配置提示:以下是本篇文章正文内容,下面案例可供参考 一、项...
    99+
    2022-11-13
    vue2 webpack proxy配置 nginx配置 vue2和nginx配置 vue与proxy
  • Nginx配置-日志格式配置方式
    目录一、默认的日志格式二、我使用的日志格式三、参数四、测试效果总结上线了一个小的预约程序,配置通过Nginx进行访问入口,默认的日志是没有请求时间的,因此需要配置一下,将每一次的请求...
    99+
    2023-03-19
    Nginx配置 Nginx日志格式配置 Nginx日志格式
  • nginx跳转配置的方式有哪些
    这篇文章主要介绍了nginx跳转配置的方式有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇nginx跳转配置的方式有哪些文章都会有所收获,下面我们一起来看看吧。一、配置server对应的域名server n...
    99+
    2023-07-02
  • 教你nginx跳转配置的四种方式
    目录前言一、配置server对应的域名1.1、精确匹配1.2、正则表达式二、配置location2.1、Location 匹配规则:仅匹配URI,忽略参数2.2、举例2.3、匹配顺序...
    99+
    2024-04-02
  • Nginx安装与配置详解
    Nginx负载均衡集群 一、Nginx简介1、nginx介绍2、反向代理2.1 什么是代理服务器?2.2 为什么要使用代理服务器?2.3 反向代理 VS 正向代理 3、负载均衡3.1 什么是负载均衡? 二、Nginx...
    99+
    2023-08-21
    nginx 服务器 运维
  • vue3 history模式配置及nginx服务器配置
    vue的路由方式有hash模式和history模式,history模式路由看起来有好些,路由路径里没有#号,而hash模式默认是有#号的。 vue3开始默认新建的项目都是history模式,不过history模式打包后想要使用正常访问的话,...
    99+
    2023-09-08
    服务器 nginx 运维
  • nginx 负载均衡轮询方式配置详解
    一、概述 Nginx的upstream目前支持的分配算法:1、round-robin 轮询1:1轮流处理请求(默认)每个请求按时间顺序逐一分配到不同的应用服务器,如果应用服务器dow...
    99+
    2024-04-02
  • Nginx多个前端服务配置方式详解
    目录需求Nginx多个前端服务配置方式多个location配置多个server配置需求 有多个前端服务需要通过Nginx部署。 Nginx多个前端服务配置方式 可以通过多个serve...
    99+
    2024-04-02
  • Nginx的虚拟主机配置方式有哪些
    Nginx的虚拟主机配置方式有以下几种:1. 基于端口的虚拟主机配置:可以通过在Nginx的配置文件中定义多个server块来实现基...
    99+
    2023-08-25
    虚拟主机 Nginx
  • nginx之keepalive详解与其配置
    文章目录 一、keepalive理解什么是keepalive如何确定请求头和响应体的长度?是否可使用长连接的条件是什么?keepalive时Nginx的等待时长是多少?keepalive的优势...
    99+
    2023-09-03
    nginx 网络 服务器
  • Nginx日志格式如何配置
    本篇内容主要讲解“Nginx日志格式如何配置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Nginx日志格式如何配置”吧!上线了一个小的预约程序,配置通过Nginx进行访问入口,默认的日志是没有...
    99+
    2023-07-05
  • Nginx怎么配置location与rewrite规则
    这篇文章主要讲解了“Nginx怎么配置location与rewrite规则”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Nginx怎么配置location与...
    99+
    2024-04-02
  • Ubuntu中Nginx怎么安装与配置
    本篇内容主要讲解“Ubuntu中Nginx怎么安装与配置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Ubuntu中Nginx怎么安装与配置”吧!1.nginx...
    99+
    2024-04-02
  • Ubuntu下搭建与配置Nginx服务
    目录一、Nginxnginx应用场合二、nginx服务搭建 1、使用apt安装2、安装后的位置: 3、启动并验证效果4、查看版本号:三、nginx配置文件介绍1、...
    99+
    2024-04-02
  • Linux中如何安装与配置Nginx
    这篇文章主要讲解了“Linux中如何安装与配置Nginx”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Linux中如何安装与配置Nginx”吧!简单安装本教程一Centos 6.3为例讲解,...
    99+
    2023-06-27
  • Windows 上Nginx+PHP 的安装与配置
    ​ 一、下载软件 nginx 下载地址 http://nginx.org/en/download.html 下载最新版的即可 PHP 这里使用PHP7.4 下载地址 https://windows.p...
    99+
    2023-09-05
    php nginx 服务器
  • nginx+php配置
    安装php yum install php #检查版本 php -v 安装nginx(根据我们自己的Nginx安装,以下可以不看) yum install nginx或者执行下面的步骤: 安装: 1.在vim /etc/p...
    99+
    2023-08-31
    nginx php 运维
  • Docker配置nginx
    1.Docker安装nginx 安装的命令 sudo docker search nginxdocker pull nginx 查看是否安装 docker images 运行测试nginx docker run --name nginx-...
    99+
    2023-08-20
    docker nginx 运维 ubuntu 服务器
  • nginx配置防盗链的三种实现方式总结
    目录什么是资源盗链一、引导案例二、Nginx防盗链实现原理三、Nginx防盗链具体实现实现方式一实现方式二实现方式三总结什么是资源盗链 资源盗链是指内容不在自己服务器上,而通过技术手...
    99+
    2024-04-02
  • nginx如何实现负载均衡轮询方式配置
    这篇文章主要介绍了nginx如何实现负载均衡轮询方式配置,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、概述Nginx的upstream目前支持的分配算法:1、round-...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作