《Egret 引擎入門》
這兩天一直在查詢vue經過打包後部署伺服器一直顯示不出來的問題。前端沒有報錯，資源載入也很正常。找了很多回答，最後定位在vue的訪問路由出了問題。

出現的現象

前端vuejs+vue-router+webpack的組合，打包是由webpack打包出來，在本地除錯的時候正常，但是在伺服器xampp裡面怎樣也出不了UI，也沒有報錯。

由於前端採取了vuejs的路由訪問，在webpack配合開發的時候，訪問的路徑一直是

   localhost:8080

也就是說，我們伺服器訪問的路徑是根目錄下，然而打包後的靜態檔案，我們放置的並不是根目錄 這個時候就出現各種訪問不到的情況出現了。

這是由於在webpack打包的時候默認了在根目錄下。注意這裡，assetsPublicPath: ‘/’,，專案中config/index.js下是webpack的配置。這個配置一個是釋出版本，一個是開發除錯版本。

當我們 運行了 npm run build的時候，這個時候路由就默認了在根目錄了。

 build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory
 
: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip
 
: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerRep

我們再看看main.js 這個檔案，配置了路由的時候，指定了base的時候，訪問路由目錄也是預設根目錄，當我們希望更改到子目錄的時候，就對base進行修改一下，例如我們的目錄是’/vuethink/’,則base就變成如下情況。

  base: '/vuethink/',

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes
})

修改完成後，再次打包後可以順利訪問到。

部署伺服器子目錄需要修改路由設定

1.修改VueRouter的base設定
2.在config/index.js下修改build的assetsPublicPath: ‘/’, 修改對應的子目錄。

例如：127.0.0.1/vuethink/
我們的目錄就修改成base

base： ‘/vuethink/’ ,  //main.js處修改路由
assetsPublicPath:'vuethink' //config/index.js 修改專案打包為子目錄

下面為配置在vuethinkphp的截圖，使用的伺服器工具xampp，放置在
htdocs\vuethink 目錄下。

配置vuethinkphp

下載到的前後端並不能馬上使用，需要對資料庫進行調整到自己適合的。

第一步，修改config/ database.php，這裡填寫資料庫的配置，修改資料庫名，使用者名稱 和 密碼，埠。在我本機的使用者為root，密碼為空，埠為3306，資料庫我建立一個thinkphp5的標記。

   'type'           => 'mysql',
    // 伺服器地址
    'hostname'       => '127.0.0.1',
    // 資料庫名
    'database'       => 'thinkphp5',
    // 使用者名稱
    'username'       => 'root',
    // 密碼
    'password'       => '',
    // 埠
    'hostport'       => '3306',

將install.sql，安裝到資料庫中去。使用Navicat for MySQL 等工具先建立一個名為thinkphp5的資料庫，然後通過右鍵執行sql檔案，指向install.sql檔案，完成後可以看到我們的資料庫表已經安裝到了。

出現vuethink介面字眼 則代表成功了。實際上這個路由缺失（miss的）的情況下出現的，這個時候對應好路由請求，這個介面字眼就不會出現的。部署過程僅僅是告知你聯通了

第二步：前端需要安裝package.json的庫。由於vuethinkphp下載後，框架沒有對應好依賴庫，因此需要使用命令列 npm install 進行安裝。安裝過程會很慢，需要耐心等待。

安裝成功後，在專案目錄下執行npm run dev 這個時候會彈出一個網頁，localhost:8080 這個時候，前端路由剛好指向了我們的登入頁面

所以當運行了http://localhost:8080 的時候，路由第一項是指向了Login的登入頁面。這個時候，輸入admin 密碼 123456 則可以進入到後臺了。

當我們需要打包部署到在XAMPP 的 htdocs\vuethink 子目錄下，這個時候，就需要對上述的路由調整一下。

打包後文件是靜態的html，不能直接執行，需要放置在自定的伺服器目錄。由於我們部署是子目錄，因此對其恰當調整一下才能正確執行到路由。
好了，這個坑暫時過了。

eslint 瘋狂報錯

由於vuethink採用了eslint嚴格的機制，所以你的程式碼一旦不按照這個機制寫格式，例如你寫雙引號，空格不按照對齊。這個時候就會報錯，報錯。

如果不需要這個嚴格的驗證機制，那麼你可以在這個機制上取消這個驗證。開啟
webpack.base.conf.js 的js

註解一下這個配置。不讓eslint給你添麻煩。

 eslint: {
    // configFile: './.eslintrc.json'
  },

  module: {
    preLoaders: [
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   loader: 'eslint'
      // },
      // {
      //   test: /\.vue$/,
      //   exclude: /node_modules/,
      //   loader: 'eslint'
      // }
    ],