vue-cli 3.0 開發單頁應用

Error: getaddrinfo ENOTFOUND localhost

啓動 vue ui 的時候，報這個錯誤。解決方式：打開 host 文件，把 127.0.0.1 綁定上 localhost 。

手機訪問 出現 invalid host header

用手機訪問本地服務時，會出現這個提示，在 devServer 的配置里加上一個：disableHostCheck: true，關閉 host 檢查。

配置 webpack alias

https://www.jianshu.com/p/e4716e5bc8bb

配置sass 全局變量

都須要使用vue.config.js
執行 npm install --save-dev sass-resources-loader

判斷開發環境和生產環境

使用process.env.NODE_ENV來判斷，在全部的文件裏面均可以訪問到這個變量。

使用Vue ui 裏面的 tasks 能夠直接運行命令行 好比打包、檢查等，還能夠直接安裝依賴和插件。

組件和路由的按需加載

組件和路由都是按照這樣的方式引入，這樣就能夠作到在單頁頁面上，一樣是按照跳轉頁面以後纔會頁面對應的js。
原來：
import Component from '@components/Component'
如今：
const Component = () => import('@components/Component')

添加百度統計

單頁應用若是須要統計到每一頁的數據，在 vue 路由的鉤子事件裏面動態的添加統計代碼。

Routers.afterEach((to, from) => {
    // 添加百度統計代碼
    setTimeout(() => {
        var _hmt = _hmt || [];
        if(process.env.NODE_ENV!=='development'){
        (function() {
            //每次執行前，先移除上次插入的代碼
            document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove()
            var hm = document.createElement("script")
            hm.src = "https://hm.baidu.com/hm.js?********************"
            hm.id = "baidu_tj"
            var s = document.getElementsByTagName("script")[0]
            s.parentNode.insertBefore(hm, s)
        })()
    }, 0)
}
})

打包後，部署到服務器子目錄上

若是不指定資源文件夾，vue 默認是打包在根目錄下的，若是文件夾放在服務器上的子目錄下，那就要單獨配置一下了，vue-cli-3 裏面配置起來也還比較簡單：
第一步，打開 vue.config.js ，把 baseUrl 設置成爲 /child-folder-name/ 。這時候你再看打包出來的 index.html，文件引入的路徑都加上了子目錄的前綴。
第二步，打開你的路由配置文件 router.js ，把 base 設置成 /child-folder-name/，歐了，大功告成了。