我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解。

1.先看vue项目打包(我这里使用的是vscode开发工具)

这里是我的项目结构:

打包之前需要修改如下配置文件:

配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)

配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题)

上面两步修改完成之后就可以进行打包了

在控制台终端输入npm run build

坐等打包

打包完成之后项目中会生成一个dist文件夹,直接访问里面的index.html就ok了

我这里有点特殊的地方,需要修改下index.html文件,是因为自己加的一个moment.js

ok,到这里打包的事情完成了,下面就放到服务器上去了

我这里使用的windows版本的nginx做演示,linux的不做讲解了,还有nginx的下载安装也不做讲解,直接看配置:

root地址不要写nginx文件夹下面的dist地址二是要写你本地相对于nginx当前服务器的地址(原文件dist地址)

配置完成后,去启动你的nginx,然后访问就ok了

【转】vue项目打包部署——nginx代理访问的更多相关文章

  1. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

  2. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  3. Vue项目打包部署到apache服务器

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...

  4. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  5. vue项目打包部署到nginx 服务器上

    假如要实现的效果如下 http://ip/vue    =>是进入首页访问的路径是  usr/local/nginx/html/vue http://ip/website     =>是进 ...

  6. vue项目打包部署到服务器,静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...

  7. cool-admin vite-vue3 打包部署 nginx代理设置

    location /api {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://xxx.com;}location /socket.io {rewrite ...

  8. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  9. vue项目 既能通过ip访问项目,又可以本地localhost访问

    1.场景问题: 有时候开发过程中,vue项目需要其他同事能访问你本地进行调试,而不是需要重新拉取代码来启动很麻烦 2.解决思路: 一. package.json"dev": &qu ...

随机推荐

  1. leetcode — merge-k-sorted-lists

    import java.util.ArrayList; import java.util.List; import java.util.PriorityQueue; /** * Source : ht ...

  2. HashMap在JDK1.8中并发操作,代码测试以及源码分析

    HashMap在JDK1.8中并发操作不会出现死循环,只会出现缺数据.测试如下: package JDKSource; import java.util.HashMap; import java.ut ...

  3. RIP笔记

    RIP(工作中没见人用过这种古老的协议,了解一下距离矢量的思想即可) RIPv2支持VLSM但不支持CIDR RIP工作在应用层,用UDP封装,端口是520 无论是RIPv1还是RIPv2都既支持周期 ...

  4. SPI OLED 驱动

    根据之前说过的 SPI 驱动的框架,在我们添加 SPI 设备驱动的时候需要与 SPI Master 完成匹配,通过 spi_register_board_info 进行注册. 构造设备 static ...

  5. Shell 数组定义与获取

    Shell 数组 bash支持一维数组(不支持多维数组),并且没有限定数组的大小. 类似与 C 语言,数组元素的下标由 0 开始编号.获取数组中的元素要利用下标,下标可以是整数或算术表达式,其值应大于 ...

  6. [转]Windows下配置Node.js和Cordova

    本文转自:https://blog.csdn.net/weixin_37730482/article/details/74388056?locationNum=3&fps=1 本文讲解在win ...

  7. .net core Identity集成IdentityServer(2) 实现IprofileService接口在accesstoken中增加自定义claims

    导读 1. 如何添加自定义的claims. 前请提要 目前我们拥有了三个web应用. localhost:40010, 验证服务器 localhost:40011, mvc客户端, 充当webapp请 ...

  8. .net实现支付宝在线支付

    流程参考<实物商品交易服务集成技术文档2.0.pdf>网关地址http://paytest.rupeng.cn/AliPay/PayGate.ashx 网关参数说明:partner:商户编 ...

  9. ext js 4.0 grid表格根据列值的不同给行设置不同的背景颜色

    Code: Ext.create('Ext.grid.Panel', { ... viewConfig: { getRowClass: function(record) { return record ...

  10. angularjs学习第四天笔记(第一篇:简单的表单验证)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...