修改webpack配置 & 修复默认歌单接口bug & 全部http链接切换为https

build.option.js

@@ -9,5 +9,6 @@ let MODE = 0;
 module.exports = {
     // 接口域名为相对路径或绝对路径（用于构建electron时请设置为true）
     absoluteURL: MODE,
-    publicPath: MODE ? '' : 'http://119.29.148.154/Server/build/static/'
+    // publicPath: MODE ? '' : 'http://119.29.148.154/Server/build/static/'
+    publicPath: MODE ? '' : ''
 };

build.sh

@@ -1,6 +1,6 @@
 #!bin/sh
 
 npm run build
-tar cvfz - build/index.html build/static | ssh root@119.29.148.154  "cd /usr/local/apache-tomcat-8.5.8/webapps/Server; rm -rf build.tar.gz; tar xvfz -;"
+tar cvfz - build | ssh root@119.29.148.154  "cd /usr/local/apache-tomcat-8.5.8/webapps/Server; rm -rf build.tar.gz; tar xvfz -;"
 
 exit

package.json

@@ -5,9 +5,10 @@
   "private": true,
   "main": "app.js",
   "scripts": {
-    "dev": "webpack-dev-server --config webpack.dev.conf.js --open --inline --hot",
+    "dev": "webpack-dev-server --config webpack.dev.conf.js --open --inline --hot --host 127.0.0.1",
     "build": "webpack --config webpack.prod.conf.js --progress --hide-modules",
-    "commit": "./node_modules/.bin/git-cz"
+    "commit": "./node_modules/.bin/git-cz",
+    "dist": "sh build.sh"
   },
   "dependencies": {
     "axios": "^0.15.3",

src/components/ListItem.vue

@@ -1,54 +1,52 @@
 <template>
-    <li class="item"
-        :class="{'item--active':isActive}"
-
-    >
-        <img v-if="cover" :src="cover" class="item__cover">
-        <div class="item__info">
-            <h3 class="item__info__title">{{title}}</h3>
-            <span class="item__info__sub-title">
+  <li class="item" :class="{'item--active':isActive}">
+    <img v-if="cover" :src="cover" class="item__cover">
+    <div class="item__info">
+      <h3 class="item__info__title">{{title}}</h3>
+      <span class="item__info__sub-title">
                         {{subtitle}}
                     </span>
-        </div>
-        <span class="item__time">
+    </div>
+    <span class="item__time">
                 {{number}}
             </span>
-    </li>
+  </li>
 </template>
-
 <script>
-    export default {
-        name: 'list-item',
-        props: [
-            'isActive',
-            'cover',
-            'title',
-            'subtitle',
-            'number'
-        ]
-    }
-</script>
+export default {
+  name: 'list-item',
+  props: [
+    'isActive',
+    'cover',
+    'title',
+    'subtitle',
+    'number'
+  ]
+}
 
+</script>
 <style lang="scss" rel="stylesheet/scss" scoped>
-    .item {
-        margin-right: -1px;
-        background: #4a473c;
-        display: flex;
-        justify-content: space-between;
-        padding: 2rem 3rem;
-        cursor: pointer;
-        border-bottom: 1px solid #3f3d34;
-        &__cover {
-            width: 3rem;
-            height: 3rem;
-            max-width: 100%;
-        }
-        &__info {
-            margin: 0 2rem;
-            width: 100%;
-        }
-        &--active {
-            color: #f9934e;
-        }
-    }
-</style>
+.item {
+  margin-right: -1px;
+  background: #4a473c;
+  display: flex;
+  justify-content: space-between;
+  padding: 2rem 3rem;
+  cursor: pointer;
+  border-bottom: 1px solid #3f3d34;
+  &__cover {
+    width: 3rem;
+    height: 3rem;
+    max-width: 100%;
+  }
+  &__info {
+    margin: 0 2rem;
+    width: 100%;
+  }
+  &--active {
+    color: #f9934e;
+  }
+}
+
+</style>
+

src/components/Player.vue

@@ -5,7 +5,7 @@
                 <!-- 专辑封面 -->
                 <div class="player__cover--wrapper">
                     <!--fork me on github-->
-                    <a href="https://github.com/Alex-xd/seeMusic"><img style="z-index:200000;width: 30%;height:25%;position: absolute; top: 0; left: 0; border: 0;" src="http://o6x2vif88.bkt.clouddn.com/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67.png" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
+                    <a href="https://github.com/Alex-xd/seeMusic"><img style="z-index:200000;width: 30%;height:25%;position: absolute; top: 0; left: 0; border: 0;" src="~assets/forkMe.png" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
                     <img class="player__cover"
                          :src="playerSt.currentTrackInfo.cover"
                          :class="{'player__cover--rotating':playerSt.playing}">

src/components/SongList.vue

@@ -8,6 +8,7 @@
                       :subtitle="track.album + ' - ' + track.artists"
                       :number="track.duration | msecondToMinutes"
                       @click.native="playthis(index)"
+                      :key="index"
             ></ListItem>
         </ol>
         <Loading v-if="state.loading"></Loading>

src/components/User.vue

@@ -5,6 +5,7 @@
                       :title="track.title"
                       :subtitle="track.singer"
                       :number="track.time"
+                      :key="index"
             ></ListItem>
         </ol>
         <Loading v-if="loading"></Loading>

src/index.template.html

@@ -4,10 +4,11 @@
 <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="Cache-Control" content="no-cache">
     <title>
         <%= htmlWebpackPlugin.options.title %>
     </title>
-    <link rel="stylesheet" href="http://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 
 <body>

src/main.js

@@ -8,17 +8,16 @@ import App from './components/App'
 import Loading from 'components/Loading'
 
 Object.keys(filters).forEach(key => {
-    Vue.filter(key, filters[key])
+  Vue.filter(key, filters[key])
 });
 
 // 全局注册Loading组件
-Vue.component('Loading', {...Loading});
-
-const app = new Vue({
-    router,
-    ...App
-}).$mount('#app');
-
-
+Vue.component('Loading', {...Loading });
 
+Vue.config.productionTip = false;
 
+const app = new Vue({
+  el: '#app',
+  router,
+  ...App
+})

src/store/actions.js

@@ -11,20 +11,30 @@ export default {
      * 初始化默认歌单
      */
     init: ({commit, dispatch}) => {
+        // FIXME: 由于获取推荐歌单的接口发生改变，导致无法获取url，遂不再显示我自己的推荐歌单了，默认搜索xxx
+        // commit(types.CHANGE_LOADING_STATE);
+        // return API.getDefaultSonglist()
+        //     .then(({data}) => {
+        //         commit(types.INIT_SONGLIST, data);
+        //         commit(types.INIT_PLAYER);
+        //         commit(types.CHANGE_LOADING_STATE);
+        //     }).catch((e) => {
+        //         dispatch('showPopup', {
+        //             msg: 'Error:' + e.message,
+        //             autodes: 2500,
+        //             className: 'warn'
+        //         });
+        //         console.error(e.message)
+        //     })
         commit(types.CHANGE_LOADING_STATE);
-        return API.getDefaultSonglist()
-            .then(({data}) => {
-                commit(types.INIT_SONGLIST, data);
-                commit(types.INIT_PLAYER);
-                commit(types.CHANGE_LOADING_STATE);
-            }).catch((e) => {
-                dispatch('showPopup', {
-                    msg: 'Error:' + e.message,
-                    autodes: 2500,
-                    className: 'warn'
-                });
-                console.error(e.message)
-            })
+        API.searchSongs('Main Theme').then(({data}) => {
+            commit(types.INIT_SONGLIST, data);
+            commit(types.INIT_PLAYER);
+            commit(types.CHANGE_LOADING_STATE);
+        }).catch((e) => {
+            commit(types.CHANGE_LOADING_STATE);
+            console.error(e)
+        })
     },
     /**
      * 播放

src/store/index.js

@@ -41,7 +41,6 @@ const mutations = {
             }
         } else {
             // TODO:此处需要性能优化  
-            // 建议：将来在后台将数据做一层缓存层，直接返回格式化好的缓存数据
             tracks.forEach((elem) => {
                 let o = {
                     urls: {
@@ -74,9 +73,18 @@ const mutations = {
                 if (elem.hMusic) {
                     o.urls.q3 = elem.hMusic.dfsId;
                 }
+
+                o.cover = _toHttps(o.cover);
+
                 state.tracks.push(o);
             });
         }
+
+        function _toHttps(str){
+            let tmp = Array.from(str);
+            tmp.splice(4, 0, 's');
+            return tmp.join('')
+        }
     },
     // 初始化播放器状态
     [types.INIT_PLAYER](state) {

src/store/modules/player.js

@@ -16,7 +16,7 @@ const state = {
          *     q3
          * }
          */
-        cover: 'http://o6x2vif88.bkt.clouddn.com/loadingImg.png',
+        cover: 'https://zhangboyuan-10039837.cossh.myqcloud.com/loadingImg.png',
         album: 'loading..',
         title: 'loading..',
         artist: 'loading..',

webpack.base.conf.js

@@ -13,8 +13,8 @@ module.exports = {
         path: BUILD_PATH,
         // publicPath就是打包生成的文件在引用时在前面的替换路径 src="publicPath/index_bundle.js"
         // 此处有坑，因为路径最后是直接拼接的，所以最后必须要加上反斜杠！！
-        publicPath: 'http://localhost:8000/',
-        filename: '[name].js'
+        publicPath: '/Server/build/',
+        filename: '[name].[chunkhash:8].js'
     },
     module: {
         rules: [{
@@ -114,7 +114,7 @@ module.exports = {
             }
         }),
         new ExtractTextPlugin({
-            filename: 'style.css',
+            filename: 'style.[chunkhash:8].css',
             // disable:true
             // allChunks: true
         })

webpack.dev.conf.js

@@ -2,7 +2,8 @@ const webpack = require('webpack');
 const config = require('./webpack.base.conf');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-config.devtool = '#source-map';
+config.output.publicPath = '/'
+config.devtool = '#cheap-module-eval-source-map';
 
 config.plugins = (config.plugins || []).concat([
     new HtmlWebpackPlugin({
@@ -14,7 +15,7 @@ config.plugins = (config.plugins || []).concat([
         filename: 'index.html',
         template: 'src/index.template.html',
         favicon:'src/assets/favicon.png',
-        hash: true,
+        hash: false,
         minify: {
             removeComments: true
         }