vue2 — 根据需要做点改动

• webpack配置

...
resolve: {
    ...
    alias: {
        ...
        // 简化一些引入路径
        '@': resolve('src'),  // ../src
        '_V': resolve('src/views'), // ../src/views
        '_C': resolve('src/components') // ../src/views/components
    }
...

• config

...
dev: {
    // 修改以下监听的端口，除此之外，还可以根据需要增删改配置其他项
    port: 3000,
...

• src

src
    components  // 公共组件
    router      //  路由
    assets      // 静态资源
    views       // 路由组件
    App.vue     // app根组件
    main.js     // 入口文件

• 去掉地址栏中的#

// router/index.js中设置mode为history
export default new Router({
  mode: 'history',
  routes: [
    ...
  ]
})

• 测试路由

// 创建src/views/Demo.vue
<template>
  <div class="demo">
    {{ msg }}
  </div>
</template>
<script>
export default {
    name: 'demo',
    data() {
      return {
        msg: 'Hello Vue 2.0'
      }
    }
}
// router/index.js导入页面组件
import Demo from '_V/Demo'
export default new Router({
  mode: 'history',
  routes: [
    // 页面路由
    { path: '/', component: Demo, name: 'demo' },
    // 非法路由，重定向到/
    { path: '*', redirect: '/' }
  ]
})

效果：

修改后效果
当在地址栏中输入并不存在的路由时，都将重定向到'/'。

上一篇： vue2 — 使用vue-cli创建vue2项目
下一篇： vue2 — 组件