我又来了，今天部署了下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. #2 安装Python

    上一篇文章主要记录 了Python简介,相信你已经爱上了小P,俗话说的好:公欲善其事,必先利其器,所以本文将带领你安装Python3! Windows平台 1.确认Windows位数: 鼠标右击此电脑 ...

  2. 搭建前端监控系统（四）Js截图上报篇

    ===================================================================== 前端监控系统: DEMO地址  GIT代码仓库地址 ==== ...

  3. 如何利用Maven Repository下载开源软件jar包

    1.打开Maven Repository 网站:https://mvnrepository.com/ 2.输入需要寻找的jar包名称,比如mybatis,点击search,一般第一个就是 3.点击选择 ...

  4. 【Java基础】10、Java中throw和throws的区别

    系统自动抛出的异常 所有系统定义的编译和运行异常都可以由系统自动抛出,称为标准异常,并且 Java 强烈地要求应用程序进行完整的异常处理,给用户友好的提示,或者修正后使程序继续执行. 语句抛出的异常  ...

  5. 牛客网剑指offer 二维数组的查找

    题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 解题思路 该题有很多种 ...

  6. kafka安装与简单使用

    一.kafka安装 安装是非常简单的,现在推荐安装0.8的版本,这个版本是非常稳定的,而且公司里面也多用此版本. 简单的安装: 这个是我使用的版本,kafka_2.11-0.8.2.2.tgz 直接t ...

  7. sql server:Monty Hall problem (蒙提霍尔问题)

    --------------------------------------------------------------------- -- Auxiliry Table of Numbers 数 ...

  8. VUE axios 发送 Form Data 格式数据请求

    axios 默认是 Payload 格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换.Payload 和 Form Data 的主要设置是根据请求头的 C ...

  9. Salesforce的站点和社区

    社区 Salesforce提供了"社区"功能.建立一个"社区"相当于建立一个前端的网站,让用户.客户.其他合作伙伴等浏览并使用其中的内容. 启用Salesfor ...

  10. 活字格 QQ 群和客户

    上活字格的官网溜达了一圈,有2点收获: 1. 活字格基础教学 QQ 群 这个群居然有1790人!好大的一个群,是不是说明学活字格的人也多呢,我潜水几天看看先 2. 活字格的用户真是各行各业都有,看到他 ...