zoukankan      html  css  js  c++  java
  • 运行和编译时期资源加载的不同【vue】

    开发语言都有编译和运行两个阶段,很多时候这个也会带来许多bug
    如:一个项目在开发阶段测试没有问题,然上线发布后就会有这样那样的问题,譬如说图片的加载,静态数据(js,css,json)读取错误

    一 、加载图片资源

    接下来我们就使用vue的项目默认首页面的img来测试在这里插入图片描述

    1、使用data挂载url

    我们把这个image的src改一下在这里插入图片描述
    改为挂载到data 如在这里插入图片描述
    保存刷新在这里插入图片描述
    图片报404在这里插入图片描述
    为啥会这丫呢?最开始的图片src是直接映射到图片的真实地址的,这个在编译期就会根据url把对应的资源打包进去;
    而后面src使用data挂载,在编译时不会将资源打包进去,所运行期根据url寻找图片就会提示404了

    2、使用静态目录加载img

    解决方法就是直接将图片移入public目录(这个是CLI3的静态资源目录会默认打包进项目)在这里插入图片描述
    这样运行时就能找到图片了

    二、加载json数据

    1、使用axios 根据相对路径读取

    同理使用axios加载本地json也会遇到同样问题
    如在assets下面我们放一个json,然在组件读取
    在这里插入图片描述
    看这个运行时直接是404在这里插入图片描述

    2、使用copy-webpack-plugin 复制到指定目录

    这个同上面图片一样可以移入到public目录下去,但还有一个方法可以解决,那就是copy-webpack-plugin这个在加入第三方libs特别有用

    1)CLI2 拷贝资源方式

    CLI2直接在webpack.prod.conf.jsplugins 下增加即可如

    
    	'use strict'
    	const CopyWebpackPlugin = require('copy-webpack-plugin')
    	
    	// other configure
    	
    	  plugins: [
    	  // other configure
    	  // copy custom static assets
    	    // copy custom static assets
    	    new CopyWebpackPlugin([
    	      {
    	        from: path.resolve(__dirname, '../static'),
    	        to: config.build.assetsSubDirectory,
    	        ignore: ['.*']
    	      },
    	      { // add here
    	        from: path.resolve(__dirname, '../src/assets/data/testgeojson.json'),
    	        to: 'localData/data',
    	        ignore: ['.*']
    	      }
    	    ])
    	    
    	  // other configure
    	  
    	  ]
    
    

    1)CLI3 拷贝资源方式

    而最新的CLI3要新增一个vue.config.js 同样添加copy-webpack-plugin

    
     configureWebpack: {
            plugins: [
                new CopyWebpackPlugin(
                [{
                        from: './src/assets/data/testgeojson.json',
                        to: 'localData/data',
                        ignore: ['.*']
                    }]
            )]
        }
        
    

    同时修改组件中axios读取方法

    
      loadJson(){
              axios.get('localData/data/testgeojson.json').then(res => {
                  console.log(res)
              }).catch(err => {
                  console.log(err)
              })
          }
          
    

    再重启哈项目在这里插入图片描述

    OK了

    其实新版的CLI要配置就得在vue.config.js中进行了,还有很多改动,目前我用到的配置如下

    完整的 vue.config.js 配置

    	
    	let path = require('path')
    	const CopyWebpackPlugin = require('copy-webpack-plugin') // 这里引入`这个CopyWebpackPlugin`插件
    	function resolve(dir) {
    	    return path.join(__dirname, dir)
    	}
    	let isProduction = process.env.NODE_ENV === 'production'
    	module.exports = {
    	    publicPath: `./`,
    	    outputDir: `./cli3learn_dist`, // build 生产环境构建文件的目录
    	    assetsDir: './statics',// 静态资源目录(很多时候打包后找不到css,这里指定后就可以解决这个问题)
    	    indexPath: './index.html', // index.html路径
    	    productionSourceMap: !isProduction,
    	    chainWebpack: config => { // 别名指定
    	        config.resolve.alias.set('@utils', resolve('src/utils/index.js'))
    	    },
    	    devServer: {
    	        port:8089,
    	        proxy: {
    	            '/': {
    	                target: 'https://www.benpaodehenji.com',
    	                ws: false,
    	                changeOrigin: true
    	            }
    	        }
    	    },
    	    // 使用这个插件 ,将src/assets/testgeojson.json拷贝到publi目录下
    	   configureWebpack: {
    	        plugins: [
    	            new CopyWebpackPlugin(
    	            [{
    	                    from: './src/assets/data/testgeojson.json',
    	                    to: 'localData/data',
    	                    ignore: ['.*']
    	                }]
    	        )]
    	    }
    	}
    
    

    ok 加载本地资源就这些了,纯属个人经验,有好方法的朋友不妨留言,不对的地方敬请指出

  • 相关阅读:
    初识python 2.x与3.x 区别
    装饰器
    函数的进阶
    Spring Boot启动问题:Cannot determine embedded database driver class for database type NONE
    22.Spring Cloud Config安全保护
    23.Spring Cloud Bus 无法更新问题(踩坑) Spring cloud config server Could not fetch remote for master remote
    24.Spring Cloud之Spring Cloud Config及Spring Cloud Bus
    Spring Boot整合Spring Data Elasticsearch 踩坑
    项目中Spring Security 整合Spring Session实现记住我功能
    32.再谈SpringBoot文件上传
  • 原文地址:https://www.cnblogs.com/dengxiaoning/p/12309582.html
Copyright © 2011-2022 走看看