关于webpack 打包vue项目的2种路由配置方式

 首先,2种都是引入配置好的router里面的index.js

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'

Vue.use(Router)
 1.第一种写法
export default new Router({
  routes: [
    {
      path: '/login',
      component: login
    }
  ]
})

2.第二种写法

var router = new Router();

router.map({

  '/login':{

    path: '/login',

    component:login;

  }

})

router.start(App,'#app')

 

第二种参考http://www.cnblogs.com/qhhw/p/5945875.html

转载于:https://www.cnblogs.com/hkyyqqq/p/7612056.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了优化webpack打包vue项目,你可以考虑以下几个方面: 1. 使用代码分割:将代码拆分多个小块,按需加载,减小初始加载的文件大小。可以使用webpack的SplitChunksPlugin插件来进行代码分割。 2. 使用懒加载:对于一些不常用或者较大的模块,可以使用懒加载的方式来延迟加载,减小初始加载的文件大小。可以通过vue-router的异步路由或者webpack的import函数来实现。 3. 压缩代码:使用webpack的UglifyJsPlugin插件来压缩代码,减小文件体积。 4. 使用缓存:通过设置webpack的output.filename和output.chunkFilename选项来生带有hash的文件名,以便浏览器能够缓存文件,减少重复请求。 5. 图片优化:将图片进行压缩和转换为base64编码,以减小文件大小。可以使用url-loader或者file-loader插件来处理图片。 6. 清除无用代码:使用webpack的Tree Shaking特性去除未使用的代码,减少输出文件体积。 7. 配置合理的Devtool选项:在开发环境中使用sourcemap来方便调试代码,而在生产环境中使用cheap-source-map或者none等选项来减小构建时间和文件大小。 8. 优化打包时的性能:使用happypack插件来多线程处理webpack的loader和babel-loader,使用ParallelUglifyPlugin插件来并行压缩代码,提高构建速度。 以上是一些常见的webpack打包vue项目的优化方法,你可以根据具体情况选择适合你项目的优化策略。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值