Vue2.x项目打包路径配置(相对路径)
1、多模块集成的 vue 项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署。 所有操作只需要使用不同操作命令即可，如 npm run dev：proj1 或者 npm run dev：proj2 。
2、使用相对路径引入的静态资源文件，会被webpack处理解析为模块依赖。例如，在 和 background： url(./logo.png) ，以及CSS @import ./logo.png 是相对的资源路径。在vuex版本类似assets文件夹。
3、原来vue-cli2搭建的项目可以使用这种，现在vue-cli3发现他也会把static做打包转化，这种方法使用不了。使用require引入图片 也可以。但是要注意：require后面只能是字符串而不能是变量，所有动态路径无法实现。
4、）components：组件目录，我们写的组件就放在这个目录里面；3）router：前端路由，我们需要配置的路由路径写在index.js里面；4）App.vue：根组件；5）main.js：入口js文件；static：静态资源目录，如图片、字体等。
5、打包另一个JS项目：进入另一个JS项目的根目录，使用相应的构建工具（如webpack）进行打包，生成dist文件夹。具体的打包命令和配置根据你使用的构建工具而定。
6、项目中引用的图片都直接引用静态目录static下的图片，如果图片放到src\assets目录下，项目中引用图片的相对路径，在vue打包的时候会改变图片的引用名称，所以会出现访问不到图片的情况。
vue项目history打包后部署在二级目录相关配置
1、先配置nginx：在路由中添加 注意如果是ts文件的话，如果默认有生成js的话要查看对应的js是否有加上目录，否则设置会无效。
2、如果想部署到一个子目录，你需要使用 Vue CLI 的 publicPath 选项 (opens new window) 和相关的 router base property (opens new window) 。
3、打开工程目录下的ehome。vue3和vue2项目两个是联系在一起的，打包部署到vue2项目运行只需要打开工程目录下的ehome即可。Vue是一套用于构建用户界面的渐进式JavaScript框架。
vue静态资源路径设置
首先，vue项目有两个地方可以存放静态资源。一个是assets文件夹，一个是static文件夹（地址栏输入static可以直接访问）。放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。
我们首先打开 App.vue ，查看template：里面定义了一个 Vue logo，其中引用了asserts文件夹的图片。根据路径，我们可以找到图片路径。那么如果我们有其他图片，自然也可以类比使用。
最后打包上线的时候将dist下的内容复制到到 STATIC_ROOT 下，然后 python manage.py collectstatic （主要是收集 admin ）的资源。其实问题不是完全解决，但这是因为 vue + django 造成的。
修改Vue cli4打包的资源都放static文件夹下后 ，资源文件夹更方便更干净了。可只能放到public文件夹下的静态资源img和js还是不是自动复制到static文件夹。
URL响应地址只能为一项，也就是spring.mvc.static-path-pattern配置只能写一项。 这意味着，按我上文设置了/SystemData/ 为URL匹配，就不能设置第二个/resources/ 这样的配置为第二静态目录。
vue打包之后图片路径错误问题
在css中写的background-img的路径出错 需要找到build文件夹下的utils.js，修改一下位置 加入红框内字段即可 。
解决方法 通过import的方法将图片源路径引入 这也是我这次重构遇到这个问题用的方法。 通过import的方法将图片源路径引入，这里使用相对路径。
我们首先打开 App.vue ，查看template：里面定义了一个 Vue logo，其中引用了asserts文件夹的图片。根据路径，我们可以找到图片路径。那么如果我们有其他图片，自然也可以类比使用。
这里能用 @assets 是因为在 vue.config.js 里面设置了如下参数。本地开发的时候，因为域名是 http：//localhost：8080 ，也就是 / ，vue自动帮你转换成相对 / 路径。build的时候，vue默认把图片路径指定在 / 下。
vue打包后生成可配置文件,用于修改接口路径等
项目public文件夹内创建url地址文件，在同级index.html里引入。然后在request文件里直接获取baseURL即可，打包后可在dist里找到文件夹里改URL。
VUE3多页面打包 方式一：webpack配置 webpack安装参考：[安装 | webpack 中文网]。
vue设置全局配置文件，打包后在dist包内可手动修改配置文件。
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
