vue项目本地运行和打包放到nginx中不一致
vue正式和测试环境打包后的文件资源不一致的原因是项目样式编写不规范。
vue如果是在本地启动并且访问本地的后台方法，就需要本地代理，vue提供了vue.confug.js文件给我们配置，vue项目启动的时候都会去找到process.env（启动环境），然后再代理到后台地址。
在本地运行样式没问题，打包后到测试环境，就出现问题，可以看到加载的css顺序变化了。统一修改某个class，本地为A覆盖了B，打包后可能为B覆盖了A。查找了很多文章都说是加载css顺序不一样导致的，的确如此。
可以参考本项目的nginx配置：但如此配置后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
vue3多页面运行与打包
1、serve 命令不携带 --mode 时，默认运行环境为 development build 命令不携带 --mode 时，默认运行环境为 production 可根据当前环境写死，也可在环境配置文件中，加入打包到的文件夹名（有多个环境的时候比较方便）。
2、打开工程目录下的ehome。vue3和vue2项目两个是联系在一起的，打包部署到vue2项目运行只需要打开工程目录下的ehome即可。Vue是一套用于构建用户界面的渐进式JavaScript框架。
3、比如前置是： ，后置是 ，实现方式：做IP代理。
使用nw.js打包vue项目为exe可执行文件
接下来会出现一个test.exe文件，双击就会出现应用窗口，但是这时的test.exe只能当前文件夹下运行，此时相当于是一个免安装的绿色软件，如果想要弄成和qq这种一步步安装的文件的话，还得借助打包工具Inno Setup Compiler打包。
这个Nwjs，是开发桌面软件，需要安装，并且如果想和别的EXE文件打包，需要自己创建一个安装程序，将这两个或者多个安装程序打包进安装程序中，在安装后运行即可。
把主文件，下面add选择nw的目录文件。执行封包就会出现单独的exe文件，这个文件就可以脱离nw目录单独执行了。改完之后另存为exe就可以了，一个完美的nw做得exe可以执行文件就搞定了。注意事项：node版本最好在10以上。
至此，我们就完成了将html文件打包成exe文件。
vue-cli3打包之后的文件为何不能本地打开
毕竟不是自己手动搭的脚手架，很多配置都是吃现成的，所以踩坑常用的事。在config的index.js文件夹里。把host的值由localhost改为“0.0.0.0”，然后就可以用手机浏览器ip+端口号打开了。
a) 我们打包为dist以后第一个问题，我们打包为dist以后经常会遇见路径出错，也就是dom出现但是js与css不会出现，显示路径错误。
资源路径的引入是错误的。vuevue-cli4打包后启动不了原因是dist文件夹结构可以看到资源路径的引入是错误的，应该用’./‘而不是’/’，在vue.config.js中加入代码，再次运行打包npm run build就成功解决了。
利用Axios请求调用本地json文件（不推荐）：Vue cli3削减掉static文件夹，取而代之的是在项目根目录下（与src同级）生成public文件夹，用于存放静态资源，可以将本地json文件放到public文件夹下，用ajsx调用。
URI请求--- 按照Web服务器里面的配置规则先处理，以nginx为例，主要求配置在nginx.conf里的location |---如果是静态文件，则由nginx直接处理 |---如果不是则交由Django处理，Django根据urls.py里面的规则进。
Vue项目build打包后如何运行
1、后台直接放到项目里面去呗，比如项目的静态资源目录下，或者单独设置模块放置。如果后台有n代理，或者node跑服务，那就需要单独设置。
2、Vue项目编写完成后，一般需要打包压缩成新的文件，下面简单介绍一下是如何对Vue项目打包的。
3、因为build是webpack将vue项目打包压缩，然后发布到服务器上的一个功能模块，方便外部人员的浏览与测试，这个时候，每发布一次就需要build一次代码。
4、Vue项目打包在终端中执行npmrunbuild1打包完成在项目的dist目录看到index.html。目录的所有文件放到nginx服务器访问。下载得到一个zip的压缩包，解压用。在html文件夹中新建一个hhdglm文件，打包的东西放进去。
vue全栈打包完可以直接运行吗?
1、如果采用webpack打包是无法直接运行多页面的，需要在打包后部署到服务器上。
2、运行结果 项目基础结构已经搭建好了，现在来启动它。进入项目文件：cd vue-element-admin 安装依赖：中国行情原因，直接安装，有时候会失败。我们一般使用npm的淘宝镜像cnpm。
3、vue不打包不可以上线。vue打包路径完整后才可以上线。路径（path）在网络中，路径指的是从起点到终点的全程路由，路径在Photoshop中是使用贝赛尔曲线所构成的一段闭合或者开放的曲线段。
4、打开工程目录下的ehome。vue3和vue2项目两个是联系在一起的，打包部署到vue2项目运行只需要打开工程目录下的ehome即可。Vue是一套用于构建用户界面的渐进式JavaScript框架。
5、接下来会出现一个test.exe文件，双击就会出现应用窗口，但是这时的test.exe只能当前文件夹下运行，此时相当于是一个免安装的绿色软件，如果想要弄成和qq这种一步步安装的文件的话，还得借助打包工具Inno Setup Compiler打包。
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
