关于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

时间: 2024-08-29 21:15:10

关于webpack 打包vue项目的2中路由配置方式的相关文章

codova 打包vue项目的坑

打包过程参考 https://segmentfault.com/a/1190000019491068 坑一: vue router路由不能再使用history模式,因为现在使用的是file协议,不是http(s)协议了,使用history模式会跳转从而找不到文件,修改成hash模式.坑二:路径问题,因为打包成app时会有平台路径添加到前面,所以不能像web一个使用绝对路径,而要使用相对路径,分别打包ios和android就不需要考虑平台路径问题了.但是新的问题出来了,但是如果要剥离css出来,那

webstorm如何调试vue项目的js

webstorm如何调试vue项目的js webstormvuewebstorm调试jsjs 1.编辑调试配置,新建JavaScript调试配置,并设置要访问的url地址,如下图所示: 在URL处填写示例: http://localhost:8080 保存好调试配置 2.先用dev正常启动项目,然后切换到刚才设置的js调试名称,点击debug按钮,这时候会打开chrome,如下图所示 : 4.当我们在chrome中运行页面,WebStorm就会响应断点状态,如下图所示: 原文地址:https:/

解决webpack打包vue项目后,部署完成后,刷新页面页面404

1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷新页面页面不会丢失    实现原理写一个window事件我监听url的变化,那我就能实先路由,那样我就可以根据url的变化,来通过ajax请求参数来渲染页面,一个url对应一个页面,就不会重复.window.addEventListener(‘hashchange‘,function(){self.

vue新建项目之标准路由配置

配置路由所有用到的地方总共四步或者说四处 1.index.js(src--router--index.js) import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import Home from '@/components/layout/Home' import showuser from '@/components/t_dom_owne

使用webpack打包Vue工程

本篇文章就是介绍如何使用webpack构建前端工程. 目标 本次的工程以Vue.js为主角,Vue.js是一款小巧优雅而且强大的轻量级mvvm框架,配合webpack模块化打包.制作出如下图的效果.仅仅搭一个框架,会用上很多插件和加载器. 环境准备 主要是一些全局的nodejs包 Nodejs npm webpack less ? 1 2 sudo npm install webpack -g // -g 代表全局安装webpack,调出命令行即可使用webpack命令 sudo npm ins

如何做到在webpack打包vue项目后,在外部动态修改配置文件

在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO NO,让我们一起来探索如何解决这个问题吧. 首先我们需要借助一个插件 generate-asset-webpack-plugin npm install generate-asset-webpack-plugin --save-dev 其次在build文件夹下建立一个generate-asset.co

webpack打包vue -->简易讲解

### 1. 测试环境: 推荐这篇文章:讲的很细致 https://www.cnblogs.com/lhweb15/p/5660609.html #### 1. webpack.config.js自行安装 ```javascript { "name": "vuetest", "version": "1.0.0", "description": "", "main":

16.如何做到webpack打包vue项目后,可以修改配置文件

问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api服务器的ip修改了,改动只是更新下这个url,但是却需要会到前端源码,url后,在重新npm run build,然后再把整个dist再重新传到前端服务器,才可以. 解决方法: 用了generate-asset-webpack-plugin 这个插件,在webpack.prod.conf.js中去生

vue 项目的I18n国际化之路

I18n (internationalization ) ---未完善 产品国际化是产品后期维护及推广中重要的一环,通过国际化操作使得产品能更好适应不同语言和地区的需求 国际化重点:1. 语言语言本地化2. 文化颜色.习俗等3. 书写习惯日期格式.时区.数字格式.书写方向备注:项目中会兵分两路,一路是语言的国际化,另一路主要为文化国际化 产品设计之初引入国际化标准,符合项目的开发流程.国内主要主要三点,一个是港澳台采用中文繁体+英文,内陆通俗中文简体,新疆等地区采用文化标准. Vue-I18nV