Vue.js——打包之后资源路径产生问题

  • https://blog.csdn.net/qq_30632003/article/details/79353035
  • https://www.cnblogs.com/diantao/p/7776523.html
  • 对于url,下面的设置比较可行,通过 require 引入
<template>
  <div class="recImage">
    <div :style="{backgroundImage:‘url(‘+urlData+‘)‘}"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      urlData: ""
    };
  }
};
</script>

原文地址:https://www.cnblogs.com/wuqiuxue/p/9235783.html

时间: 2024-10-08 09:58:46

Vue.js——打包之后资源路径产生问题的相关文章

vue.js 打包时出现空白页和路径错误

vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性: assetsPublicPath属

vue.js打包生成配置文件(参考)

第一步:安装generate-asset-webpack-plugin插件 cnpm install generate-asset-webpack-plugin --save-dev 第二步:配置build/webpack.prod.conf.js文件 //打包时输出可配置文件 const GenerateAssetPlugin = require('generate-asset-webpack-plugin') const createServerConfig = function (comp

CSS及HTML、js中的资源路径问题

路径 分为相对路径和绝对路径 一.相对路径. 相对于文件本身的路径. 用 ./ 表示同一文件夹下的兄弟文件. 用../ 表示所处文件夹的父文件夹中的文件. 二.绝对路径. 本机绝对路径是 例如  E:\phpStudy\WWW\NEWPC\images. 网络的绝对路径是指:例如一张图片的绝对路径 https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=2048526859,4160700425&fm=202&mola=new&crop=v1

vue.js随笔记---初识Vue.js(2)

环境搭建(推荐使用vue.js官方提供的命令行工具,用于快速搭建大型单页面应用,包含:vue.js的一个框架爱,vue.js打包工具,测试的工具,开发调试的服务器等): 1.npm:node.js的一个包管理工具,npm在国内使用会很慢,可以使用淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm安装成功检测:cnpm -v回车可看到版本号则表示安装成功! 2.vue-cli安装(vue-cli相当于脚

beego+vue.js分离开发,结合发布,简单部署

大家知道,golang开发的东西部署简单是它很大的卖点,一般的应用,生成的可执行文件直接放服务器上运行即可,不需要任何环境.当然,大型的应用才需要比如mysql,nginx等.但是当vue.js出现后,前端几乎都是它(vue.js)的天下了,因为用了vue.js就回不去了,无法再回到beego的view里写tpl或html页面了,很受伤,没办法,vue.js实在太方便了,所谓双向绑定,这是神马概念,百度吧,我也讲不清楚-- 之前很懵逼,将vue.js开发的前端,完完全全独立地部署在云上(用ngi

【转】从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)

自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合vue.js 就不需要webpakc这种构建工具了,可以直接在页面内使用,下面以 ‘yyl-npm-practice’ 这个包为例 第一步:使用 vue init webpack-simple yyl-npm-practice   初始化项目 提示: 不要用 vue init webpack npm

webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径. 解决办法 打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图. 那么这样后,资源的引用路径就正确了. 当然在config文件夹下的index.js中修改 assetsPubl

用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loaclhost:3000/news/newspage时静态资源路径前多了一个/news导致不能找到静态资源 app.js var express=require('express'); var app=express(); var path=require('path'); var http=requir

vue项目打包部署-----解决打包后访问资源失败问题

vue项目打包部署-----解决打包后访问资源失败问题. 本文链接:https://blog.csdn.net/kaola_l/article/details/80497490 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找