Vue-cli为第一次部署配置配置服务端口反向代理。 关于vue项目的dist包的部署，nginx配置中遇到的坑： 1、vue项目中vue.config.js的配置：devServer.proxy可以是一个指向API服务器的字符串开发环境： 2.打包后将dist包部署到linux服务器，Nginx配置反向代理实现ajax跨域访问：conf目录下nginx.conf的配置如下：configure然后重新启动 nginx。 /nginx-sreload 注意：rewrite^/prod-api/(.*)1break一开始就漏掉了； 恳求后台socket还是404notfound，vue-cli下配置了webpack的proxy参数进行反向代理
在平时的本地开发过程中，很容易遇到跨域问题，导致无法调整socket。
简单易懂的vue.config.js配置参数
官网发布的vue-cli3在创建时不会手动创建vue.config.js，因为这是一个选项，所以通常需要改webpack的时候，都会自己创建一个vue.config.jswebpack 反向代理，然后因为Vue-cli3与webpack高度集成。 一般来说，用户不需要知道weboack是做什么的，因此webpack的配置文件不会暴露。 我们可以自动创建 vue.config.js 来更改默认的 webpack。 注意，只能调用vue.config.js。
publicPath（自VueCLI3.3起，baseUrl已被弃用，请使用publicPath）参考：默认情况下，VueCLI会假设您的应用程序部署在域名的根路径上，例如。
如果应用程序部署在子路径上，则需要使用此选项指定子路径。 例如，如果您的应用程序部署在，请将 publicPath 设置为 /my-app/。 该值在开发环境中也生效。 如果你想把开发服务器设置在根路径上，可以使用一个条件值：一般开发环境，本地运行会直接部署在根路径上，publicPath设置为'/'，访问地址为你的IP地址 。
下面是设置为“/app”的效果： 从里面可以知道，静态资源文件都在app下面，所以在dist下面添加一个新的app目录，把文件放到dist下面在app下，相当于一个文件Path，可以发现项目正常启动了。 通常nginx会配置一个静态资源目录，打包后的文件会放在这个静态资源目录下，nginx会做映射，所以publicPath属性基本不需要改。 '/' 会做。
推论：如果publicPath配置为'/aaa/bbb/ccc'，则需要在对应的服务器路径下新建aaa>bbb>ccc文件夹，然后将打包的文件放入其中即可。 在项目中，我将在 .env.Production 文件中设置一个变量 VUE_APP_BASE_URL 。 项目打包后，告诉相关人员nginx路由前缀是什么。 outputDirassetsDirindexPathfilenameHashing 直观效果：运行npmrunbuild时，会出现打包文件前面8位的哈希值，什么是哈希值？ 将文件内容的哈希值添加到打包文件名中是目前最常用的有效利用浏览器长缓存的方法。 如果js文件有内容更新，则hash也会更新。 浏览器请求更改路径，以便更新缓存。 如果js内容Unchanged，则hash不变，直接使用缓存。 （这段话参考自其他文章）。
尝试将 filenameHashing 的值设置为 false，您将不会获得那种后缀哈希值。 pageslintOnSaveruntimeCompilertranspileDependencydevelopmentSourceMapcrossorigin（看不懂）integrityconfigureWebpackchainWebpackCss相关配置devServer 如果你的后端应用程序和前端API服务器没有运行在同一主机上，则需要将API请求代理到开发环境中的API服务器。 这个问题可以通过vue.config.js中的devServer.proxy选项来配置。
补充知识所谓跨域是指不同来源，不满足合约、域名、端口相同的约定。 相同来源，不同来源，不同合约（https）：90/index.html不同源端口不同（90），不同源域名不同（demo）当合约、域名、端口任意一项不同时，是一个不同的来源。 如果不同来源互相请求资源，甚至作为跨域补充知识webpack 反向代理，反向代理（ReverseProxy）模式是指使用代理服务器接受网络上的连接请求，然后将请求转发到内部网络上的服务器，并将它们发送到服务器。 得到的结果返回给请求连接的客户端，此时代理服务器对外充当反向代理服务器。 客户端不需要做任何配置。 更改config/index.js/vue.config.js文件（修改后记得重新npmrundev）host将其值改为0.0.0.0，表示可以访问本机所有IP地址，这样vue项目就可以了可以同时通过Localhost和IP访问。
端口设置banner是否打开是第一次编译时手动打开浏览器。 Hot开启为true，启动热重载，手动刷新页面。 changeOrigin允许跨域，为false时，请求头中的host始终是浏览器发送的host； 如果设置为true：请求头中的host会被设置为target ws的值是否代理websocketpathRewrite重绘url的路径部分，这里的文字记录下来，方便忘记的时候快速查阅它。 如有错误，请强调。
vue3中vite的配置上一节-构建vue3+typescript+vite+yarn项目在vue2中，我们使用webpack打包工具。 一些基本的配置我们已经很熟悉了，但是实际上，它们有哪些区别呢？ 参考link-vite英文文档 在vue2中，webpack的配置是基于vue.config.js文件，但在基于vite的vue3中，配置文件是vite.config.js。 我创建了一个ts版本的vue3项目，所以我的配置文件是vite.config.ts并且新创建的项目配置文件在创建项目的时候就已经默认生成了。 只配置了vue的支持，如下：配置反向代理，使用server配置项配置一目了然。 这里主要讲解vue2的vue.config.js的配置。 我的代理中的 configconfig 变量从全局变量开始。 这需要在根目录下创建两个名为：.env.development 和 .env.Production。 文件编译相关的变量：在vue2中，我习惯使用开箱即用的路径别名，但是在vue3的ts项目中，如果直接使用会报错：这样配置后，导入的组件可以正常编译。 下一节-介绍vue3中的router和vuex关于在vue中配置代理请求（配置跨域）
刚接手一个项目，开始的时候想看看请求socket：Nani？ 为什么是本地主机。
那时，我的心里真的有一万匹草泥马在驰骋。 由于之前只见过，并没有实际使用过，所以第一次看到的时候还是很困惑。 现在基本熟悉了，接下来配置代理吧。 配置代理有两种情况。 一是你可以看到config文件夹，二是你实际上看不到该文件夹。 下面我就这两种情况详细说一下。
