如何解决vue打包项目中的图片,静态css,js 不能访问路径问题

wuaiqiu 发布于2019-08-30 15:56 / 904人阅读

摘要：在书写代码的时候按照相对路径引入但是默认打包的等资源的路径是绝对的实际写的代码打包编译后的路径是这样的打包编译之后的路径是绝对路径当部署到带有文件夹的项目中就会报错，因为把配置的文件当成了根路径解决办法引入相对路径打开执行打包命令，

1.在书写代码的时候按照相对路径引入；

但是webpack+vue-cli 默认打包的css,js 等资源的路径是绝对的；

实际写的代码

3.webpack 打包编译后的路径是这样的；打包编译之后的路径是绝对路径；当部署到带有文件夹的项目中就会报错，因为把配置的static 文件当成了根路径；
解决办法：引入相对路径；
打开build/webpack.prod.conf.js

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath("js/[name].[chunkhash].js"),
    chunkFilename: utils.assetsPath("js/[id].[chunkhash].js"),
    publicPath: "./"
  },

4.执行打包命令，发现解决了css,js img图片的路径问题，但是没有解决背景图片的路径问题，下面我们解决背景图片的问题
修改build/utils.js

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: "vue-style-loader",
        publicPath: "../../"
      })
    } else {
      return ["vue-style-loader"].concat(loaders)
    }

再次执行打包命令，发现完美解决问题；
职场小白south Joe，望各位大神批评指正，祝大家学习愉快！

专线服务云服务器服务器中的项目路径 java图片路径问题 cdn能不能加速服务器的静态图片移动端js图片打包

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117463.html

如何解决vue打包项目中的图片,静态css,js 不能访问路径问题

摘要：在书写代码的时候按照相对路径引入但是默认打包的等资源的路径是绝对的实际写的代码打包编译后的路径是这样的打包编译之后的路径是绝对路径当部署到带有文件夹的项目中就会报错，因为把配置的文件当成了根路径解决办法引入相对路径打开执行打包命令， 1.在书写代码的时候按照相对路径引入；showImg(https://img-blog.csdnimg.cn/20190222095007168.jpg?...

BenCHou 2019-08-23 15:41 评论0 收藏0
如何解决vue打包项目中的图片,静态css,js 不能访问路径问题

摘要：在书写代码的时候按照相对路径引入但是默认打包的等资源的路径是绝对的实际写的代码打包编译后的路径是这样的打包编译之后的路径是绝对路径当部署到带有文件夹的项目中就会报错，因为把配置的文件当成了根路径解决办法引入相对路径打开执行打包命令， 1.在书写代码的时候按照相对路径引入；showImg(https://img-blog.csdnimg.cn/20190222095007168.jpg?...

yangrd 2019-08-05 18:12 评论0 收藏0
实战Vue简易项目（2）定制开发环境

摘要：至于，为什么跟踪文件因为这个功能是开发环境下独有的，要修改开发环境吖，必然找开发环境的配置文件进行跟踪。测试可行性重启项目后，在浏览器中输入是你本地，可通过查看能够访问，就说明局域网内的其他端可以访问。然而，这样并没有结束。本章内容包含上一章思考的解决，还有一些其它的定制... CSS预处理关于对.vue文件模块处理规则的配置依次可在build/webpack.base.conf....

woshicixide 2019-08-23 10:33 评论0 收藏0
vue开发看这篇文章就够了

摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？ Library 库，本质上是一...

fsmStudy 2019-08-21 18:37 评论0 收藏0
Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng）

摘要：放置在目录下或通过绝对路径被引用。对于相关来说，我们推荐使用而不是直接链式指定。在不更改配置文件的情况下，前端页面迭代发布，不需要重启服务。作者：gauseen 0. 关于 Vuejs 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、灵活、高效。生态系统项目介绍 awesome-vue Vue.js 相关很棒的...

Arno 2019-08-26 13:49 评论0 收藏0