精华内容
下载资源
问答
  • 我一共有五个页面,采用了异步路由加载,后四个方式如下,这样按需加载每个路由页面,以免首屏加载过慢。这个样子,调试模式(dev)是没有任何问题的,样式能够显示出来,各种组件的样式以style分开清晰显示。但是npm ...

    我一共有五个页面,采用了异步路由加载,后四个方式如下,这样按需加载每个路由页面,以免首屏加载过慢。

    bV4jBq?w=388&h=114

    这个样子,调试模式(dev)是没有任何问题的,样式能够显示出来,各种组件的样式以style分开清晰显示。

    bV4j4F?w=916&h=454

    但是npm run build打包以后的文件就不行了,webpack并没有将异步路由的vue的css文件给抽取出来,只抽取了用import方式引入组件的css,也就是index的css。

    bV4jVR?w=817&h=488

    我后面将异步组件换成了import就能抽取样式了。。。。

    bV4jEh?w=572&h=95

    是不是我的css也应该生成多个,而不是直接抽取到单个css?理论上点击时应更改css文件引入?

    这算是webpack的build的配置有问题?毕竟dev没啥毛病。。。后来又觉得是路由的问题,但是我webpack与vue都学艺不精,还是贴出来请大神看看,这个问题是vue-router能解决的,还是webpack能解决的,求个解决方案。

    webpack.dev.conf.js

    var utils = require('./utils')

    var webpack = require('webpack')

    var config = require('../config')

    var merge = require('webpack-merge')

    var baseWebpackConfig = require('./webpack.base.conf')

    var HtmlWebpackPlugin = require('html-webpack-plugin')

    var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

    // add hot-reload related code to entry chunks

    Object.keys(baseWebpackConfig.entry).forEach(function (name) {

    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])

    })

    module.exports = merge(baseWebpackConfig, {

    module: {

    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })

    },

    // cheap-module-eval-source-map is faster for development

    devtool: '#cheap-module-eval-source-map',

    plugins: [

    new webpack.DefinePlugin({

    'process.env': config.dev.env

    }),

    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NoEmitOnErrorsPlugin(),

    // https://github.com/ampedandwired/html-webpack-plugin

    // new HtmlWebpackPlugin({

    // filename: 'index.html',

    // template: 'index.html',

    // inject: true

    // }),

    new FriendlyErrorsPlugin()

    ].concat(utils.htmlPlugin())

    })

    webpack.prod.conf.js

    var path = require('path')

    var utils = require('./utils')

    var webpack = require('webpack')

    var config = require('../config')

    var merge = require('webpack-merge')

    var baseWebpackConfig = require('./webpack.base.conf')

    var CopyWebpackPlugin = require('copy-webpack-plugin')

    var HtmlWebpackPlugin = require('html-webpack-plugin')

    var ExtractTextPlugin = require('extract-text-webpack-plugin')

    var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

    var env = config.build.env

    var webpackConfig = merge(baseWebpackConfig, {

    module: {

    rules: utils.styleLoaders({

    sourceMap: config.build.productionSourceMap,

    extract: true

    })

    },

    devtool: config.build.productionSourceMap ? '#source-map' : false,

    output: {

    path: config.build.assetsRoot,

    filename: utils.assetsPath('js/[name].[chunkhash].js'),

    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

    },

    plugins: [

    // http://vuejs.github.io/vue-loader/en/workflow/production.html

    new webpack.DefinePlugin({

    'process.env': env

    }),

    new webpack.optimize.UglifyJsPlugin({

    compress: {

    warnings: false

    },

    sourceMap: true

    }),

    // extract css into its own file

    new ExtractTextPlugin({

    filename: utils.assetsPath('css/[name].[contenthash].css')

    }),

    // Compress extracted CSS. We are using this plugin so that possible

    // duplicated CSS from different components can be deduped.

    new OptimizeCSSPlugin({

    cssProcessorOptions: {

    safe: true

    }

    }),

    // generate dist index.html with correct asset hash for caching.

    // you can customize output by editing /index.html

    // see https://github.com/ampedandwired/html-webpack-plugin

    // new HtmlWebpackPlugin({

    // filename: config.build.index,

    // template: 'index.html',

    // inject: true,

    // minify: {

    // removeComments: true,

    // collapseWhitespace: true,

    // removeAttributeQuotes: true

    // // more options:

    // // https://github.com/kangax/html-minifier#options-quick-reference

    // },

    // // necessary to consistently work with multiple chunks via CommonsChunkPlugin

    // chunksSortMode: 'dependency'

    // }),

    // split vendor js into its own file

    new webpack.optimize.CommonsChunkPlugin({

    name: 'vendor',

    minChunks: function (module, count) {

    // any required modules inside node_modules are extracted to vendor

    return (

    module.resource &&

    /\.js$/.test(module.resource) &&

    module.resource.indexOf(

    path.join(__dirname, '../node_modules')

    ) === 0

    )

    }

    }),

    // extract webpack runtime and module manifest to its own file in order to

    // prevent vendor hash from being updated whenever app bundle is updated

    new webpack.optimize.CommonsChunkPlugin({

    name: 'manifest',

    chunks: ['vendor']

    }),

    // copy custom static assets

    new CopyWebpackPlugin([

    {

    from: path.resolve(__dirname, '../static'),

    to: config.build.assetsSubDirectory,

    ignore: ['.*']

    }

    ])

    ].concat(utils.htmlPlugin())

    })

    if (config.build.productionGzip) {

    var CompressionWebpackPlugin = require('compression-webpack-plugin')

    webpackConfig.plugins.push(

    new CompressionWebpackPlugin({

    asset: '[path].gz[query]',

    algorithm: 'gzip',

    test: new RegExp(

    '\\.(' +

    config.build.productionGzipExtensions.join('|') +

    ')$'

    ),

    threshold: 10240,

    minRatio: 0.8

    })

    )

    }

    if (config.build.bundleAnalyzerReport) {

    var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

    webpackConfig.plugins.push(new BundleAnalyzerPlugin())

    }

    module.exports = webpackConfig

    展开全文
  • Vue下拉框异步加载

    2021-03-02 10:51:10
    VUE 下拉框 一、treeselect组件 <treeselect style="width:260px;" :multiple="false" //多选 :normalizer="normalizer" //定义normalizer()方法,将返回数据映射成组件数据 clearable //是否支持...

    VUE 下拉框

    一、treeselect组件

     

     <treeselect style="width:260px;" 
    	:multiple="false"  //多选
    	:normalizer="normalizer" //定义normalizer()方法,将返回数据映射成组件数据
    	clearable //是否支持清除
        :options="deptOptions"  //树结构数据
    	:searchable="false"  //是否支持搜索
    	:load-options="loadOptions" //异步加载数据(每次点击下拉框异步加载)
    	placeholder="选择" 
    	v-model="value" />

    2.异步加载时,当前节点的children属性指定null

    3.异步加载时,在点击前不知道子节点是否是叶子节点,那就加载方法里判断当前点击的是不是根结点

    指定parentNode.children="";(指定为[]和null是不生效的)

     

    展开全文
  • vue异步加载

    2021-03-14 21:28:34
    2. 为什么需要异步加载组件? 当项目功能越来越多,所包含的子组件也越来越多,导致页面加载,访问速度过慢,所以需要优化页面加载的性能。 3. 异步加载组件方法 可以使用懒加载,即 () => import ( 地址) ...

    1. 什么是异步组件?

    即只在组件需要渲染的时候进行加载渲染并缓存。

    2. 为什么需要异步加载组件?

    当项目功能越来越多,所包含的子组件也越来越多,导致页面加载,访问速度过慢,所以需要优化页面加载的性能。

    3. 异步加载组件方法

    • 可以使用懒加载,即 () => import ( 地址)

    • 关于路由懒加载:VUE:实现路由懒加载

    • 使用require

    // 全局组件注册
    Vue.component('Home, function (resolve) {
      // 这个特殊的 `require` 语法将会告诉 webpack
      // 自动将你的构建代码切割成多个包,这些包
      // 会通过 Ajax 请求加载
      require(['./Home'], resolve)
    })
    
    
    // 局部组件注册
    new Vue({
      components: {
        'Home': () => resolve => { require(['./Home'], resolve) }
      }
    })
    
    
    展开全文
  • 由于vue渲染组件是在挂载的时候,所以当我们使用异步方法获取数据时,会有一定的延迟。可能在页面渲染时,异步数据还未请求到,导致图表渲染不成功。 此时,比较合理的解决办法,应该是使用 async/await ...

     

    之前的文章  https://blog.csdn.net/qq_38830964/article/details/110545637 中,有对echarts的基础使用有过阐述。

    由于在实际使用环境中,通常的图表数据是后台经过聚合计算而来,所以本文主要整理一下如何从接口获取数据,并显示在图表上

    由于vue渲染组件是在挂载的时候,所以当我们使用异步方法获取数据时,由于js同步异步任务执行的机制。可能在页面渲染时,异步数据还未请求到,导致图表渲染不成功。

    此时,比较合理的解决办法,应该是使用 async/await 语法进行模拟同步请求。

     

    代码如下:

    以下代码是通过接口,获取一个饼图的数据

    图表容器

     <div id="myChart2" :style="{ width: '400px', height: '300px' }"></div>

    方法执行

     mounted() {
        this.getdata();
    }

    数据获取逻辑

     async getdata() {
          this.$echarts.init(document.getElementById("myChart2")).showLoading();
          await this.$axios.get("api/Base/GetRwsForNow").then((response) => {
            //console.log(response);
            if (response.data.result == "1") {
              //let contacts = response.data.seriesList;
              //this.pieData.push(contacts);
              //this.temp = contacts;
              // console.log(response)
              this.$echarts.init(document.getElementById("myChart2")).hideLoading();
              this.$echarts.init(document.getElementById("myChart2")).setOption(
                {
                  title: { text: "任务情况" },
                  tooltip: {},
                  legend: {
                    data: response.data.legendList,
                  },
                  //backgroundColor: "#2c343c", //设置全局背景颜色
                  textStyle: {
                    //全局文本样式
                    // color: "rgba(255, 255, 255, 0.3)",
                  },
                  //设置视觉引导线
                  lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)",
                  },
                  itemStyle: {
                    //高亮样式
                    emphasis: {
                      //color: "#c23531",
                      shadowBlur: 200,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                  series: {
                    type: "pie",
                    radius: "55%",
                    //roseType: "angle", //南丁格尔图
                    //this.pieData,
    
                    data: response.data.seriesList,
                    //[
                    // { value: 2, name: "启用" },
                    // { value: 1, name: "暂停" },
                    //],
                  },
                },
                true
              );
            }else{
              this.$ant_message.error(response.data.msg);
            }
          });

    除了使用 async/await语法之外,还有很多其他的方法可以这种因为异步数据加载而导致数据未渲染的情况。比如使用定时器、$nextTick等,大家可以根据实际情况,自行选用。

     

     

    展开全文
  • Vue 腾讯地图异步加载

    2021-03-19 09:58:04
    使用异步加载,在需要地图的模块进行懒加载。 核心代码如下: mounted() { //异步加载 const mapScript = document.createElement('script') mapScript.type = 'text/javascript' mapScript.src = '...
  • Vue项目上使用异步加载以SPA的方式构建应用,往往会把所有的代码打包到一起,使得单个js日益庞大。所以我们需要思考一些暂时不用的代码是否可以异步加载,而Vue也提供了这样的能力。一、使用异步组件Vue允许以一个...
  • vue 异步加载组件

    2021-04-15 15:35:00
    </script> 然后你在网页打开控制台,这个0.js就是我要引入的Good组件,下面说到怎么改这个文件名 无论你怎么点击这个按钮,js都没变化,也就是说第一次进入这个页面js加载好了,如果项目大,加载多就影响使用了 ...
  • 情景 需要生成一棵树,树的...实现一个有异步批量加载功能的树 class treeLoader { constructor(props) { const { treeData, treeProps, treeLoaderFn, //加载树结点的fn treeMultiLoaderFn, //批量加载树结
  • a-tree 异步树真是太多坑了,不显示文字,点击根节点没反应,点击子节点没反应,点击子节点出现的是上一个子节点内容,切换是否展示监管部门时点击过的子节点没反应,好在问题都一一解决了,记录一下。 <a-...
  • * @description 加载百度地图基础组件js */ export function asyncLoadBaiduJs () { return new Promise((resolve, reject) => { if (typeof BMapGL !== 'undefined') { resolve(BMapGL) return true } ...
  • 注意:首屏的代码不要异步加载,非首屏代码异步加载。不然初始代码加载完成后,还有等运行后再去加载首屏代码,反而拉慢首屏显示。一、现在异步组件最常见的技术用两种。1、依赖requireconst Editor = resolve =>...
  • 前提:使用vue官方脚手架搭建(webpack)使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,这样打包使单页面的应用的体积比较大,浪费资源,通常的做法使用按需加载,以节约...
  • vue异步请求问题

    2021-06-28 06:33:52
    这个swiperList是异步获取的,jsCallBack想获取它的值获取不到,怎么解决呢回答要看 jsCallBack 调用的时机。如果是异步请求结束之后应该是可以获取到值的。怀疑是this 作用域问题,jsCallBack 方法里面打印下 this...
  • 2. 为什么需要异步加载组件? 当项目功能越来越多,所包含的子组件也越来越多,导致页面加载,访问速度过慢,所以需要优化页面加载的性能。 3. 异步加载组件方法 可以使用懒加载,即 () => import ( 地址) 关于...
  • {import("@/components/home/home.vue").then( module => {resolve(module)}}注:(上面import的时候可以不写后缀)export default [{path: '/home',name:'home',component: Home,meta: {requir...
  • vue异步加载高德地图

    2021-06-13 17:34:02
    几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。但这样如果...
  • 利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载(按需加载)。为什么需要懒加载?在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要...
  • 先看下这个static目录下的css文件夹和js文件夹,打包的时候...如果app.js超过1MB,就要用异步组件实现按需加载,需要哪个组件,就发送请求去加载哪一个组件的js代码。 修改import的书写方式,即可实现按需加载。 ...
  • 页面在等待网络请求时总是要展示些东西给用户,来提升用户体验。...假设我们在App.vue中引入了CountTest.vue组件,在CountTest中有异步请求: <template> <div> <span>姓名:{{name}}<
  • vue项目优化之懒加载引入问题一、默认: 异步延迟加载结果图解二、彻底懒加载(手动配置)步骤1. 实现异步延迟加载的两步2. 配置脚手架,去掉prefetch结果图解 引入问题 单页面应用的致命问题: 首屏加载极慢 原因: ...
  • Vue 只有在这个组件需要被渲染的时候才会从服务器端请求组件的相关js,且会把结果缓存起来供未来重渲染。 异步组件的好处: 提高性能。在大型应用中,我们可以将应用分割成小一些的代码块,并且只在需要的时候才从...
  • 异步请求的数据,对它做一些处理,需要怎么做呢?? axios 异步请求数据,得到返回的数据, 赋值给变量 info 。如果要对 info 的数据做一些...所以,如果需要对异步加载的数据做一些处理,直接在 axios 的回调函数中处
  • vue.js 组件组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般都会使用webpack的代码分割和vue-router...
  • Vue异步组件 components: { headerNav: (resolve) => { setTimeout(() => { resolve(require('@/components/header')) }, 1000) } }, webpack代码分割(2.x版本) // 写法一 const Layout = (resolve) =&...
  • 正常的路由组件加载方式: 异步加载方式:
  • vue使用ECharts时的异步更新与数据加载使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面)在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器初始化一个 echarts 实例并通过 setOption 方法...
  • 书不可不读,异步不可不控制。 —— 鲁迅不请自来。简化一下我们的业务流程:通过异步请求获取数据组件接受数据并渲染个人比较推荐使用组件内部钩子,在更小的颗粒度下控制异步流程。主要使用到的是 ...
  • antdesgin vue 树 或 选择树 异步加载数据 数据来自于后端(vue3.0+ts)
  • 通过vue异步请求数据的方法,去解决页面加载但是没有数据的问题 在main.js中引入全局异步请求的方法。代码如下 //全局引用异步执行请求方法 这里的可以通过传入在某个页面想要请求的接口 Vue.prototype.$...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,154
精华内容 11,261
关键字:

vue异步加载js

vue 订阅