添加路由

public/index.html

@@ -18,6 +18,10 @@
     <meta name="format-detection" content="telephone=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- 使用CDN的CSS文件 -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+      <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
+    <% } %>
     <!-- 使用CDN的JS文件 -->
     <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
       <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>

src/components/layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="j-container" :class="{'transparent-header': headerInfo.transparentHeader}">
-    <div class="j-header jy-app-header" v-if="!weixinBrower" :class="{hideBorder: headerInfo.hideBorder}">
+    <div class="j-header jy-app-header" v-if="!weixinBrowser" :class="{hideBorder: headerInfo.hideBorder}">
       <van-icon class="header-left" :class="{ hide: headerInfo.actionLeftHide }" name="arrow-left" @click="goBack" />
       <span class="header-title">{{ headerInfo.title }}</span>
       <span class="header-right" :style="headerInfo.actionRightStyle" @click="actionRight">{{ headerInfo.actionRightText }}</span>
@@ -51,7 +51,7 @@ export default class Layout extends Vue {
     // console.log('headerConfig', this.conf)
   }
 
-  get weixinBrower () {
+  get weixinBrowser () {
     return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
   }
 

src/router/modules/home.ts

@@ -1,18 +1,34 @@
 export default [
+  {
+    path: '/test',
+    name: 'test',
+    component: () => import(/* webpackChunkName: "test" */ '@/views/Test.vue'),
+    meta: {
+      title: '测试页面'
+    }
+  },
   {
     path: '/home',
     name: 'home',
-    component: () => import(/* webpackChunkName: "index" */ '@/views/Test.vue'),
+    component: () => import(/* webpackChunkName: "index" */ '@/views/main/Home.vue'),
     meta: {
       title: '首页'
     }
   },
   {
-    path: '/test',
-    name: 'test',
-    component: () => import(/* webpackChunkName: "test" */ '@/views/Test.vue'),
+    path: '/buy',
+    name: 'buy',
+    component: () => import(/* webpackChunkName: "index" */ '@/views/buy/Buy.vue'),
     meta: {
-      title: '测试页面'
+      title: '购买'
+    }
+  },
+  {
+    path: '/pay',
+    name: 'pay',
+    component: () => import(/* webpackChunkName: "pay" */ '@/views/pay/Pay.vue'),
+    meta: {
+      title: '支付'
     }
   }
 ]

src/store/index.ts

@@ -19,7 +19,7 @@ export default new Vuex.Store({
     direction: 'forward', // 页面切换方向
     env: {
       // 运行环境是否是微信浏览器
-      weixinBrower: navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
+      isWeiXinBrowser: navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
     },
     defaultLayoutConf: {
       // layout标题,优先级高于$route.meta

src/utils/globalFunctions.ts

@@ -1,7 +1,7 @@
 import moment from 'moment'
 
 // 是否是微信浏览器
-export function isWeixinBrower () {
+export function isWeiXinBrowser () {
   return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
 }
 

src/utils/index.ts

@@ -2,7 +2,3 @@ import './globalDirectives'
 import './globalFilters'
 // import './vConsole'
 
-// 这里可以写一些需要在config.ts中使用的公共方法
-export function index (v) {
-  return v
-}

src/views/buy/Buy.vue

@@ -4,7 +4,8 @@
       介绍页面
     </div>
     <div class="j-button-group j-footer">
-      <button class="j-button-confirm">立即支付</button>
+      <router-link tag="button" class="j-button-confirm" to="/pay">立即支付</router-link>
+      <!-- <button class="j-button-confirm">立即支付</button> -->
     </div>
   </div>
 </template>

vue.config.js

@@ -21,7 +21,9 @@ const externals = {
 
 const cdn = {
   // 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本
-  // css: ['//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css'],
+  css: [
+    // '//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css'
+  ],
   js: [
     '//cdn.bootcss.com/vue/2.6.11/vue.min.js',
     '//cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
@@ -99,6 +101,17 @@ module.exports = {
         // args[0].chunksSortMode = 'none'
         return args
       })
+    } else {
+      config.plugin('html').tap(args => {
+        // html中添加wxjsssk的cdn
+        args[0].cdn = {
+          js: [
+            cdn.js[cdn.js.length - 1]
+          ]
+        }
+        console.log(args)
+        return args
+      })
     }
 
     // 分析静态资源