Magento 1 Vue Storefront 環境建置（中篇）

Magento 1 Vue Storefront環境建置系列又來啦！還記得我們在上一篇文章中提到什麼嗎？

在上一篇magento 1 Vue Storefront 環境建置（上），我們建置了基礎的環境，這次我們要來建置Vue Storefront與Vue Storefront Api。那就跟著以下步驟，一起來試試吧！

1.請在你的目錄下複製Vue Storefront的git

cd /var/www/vuestorefront

git clone https://github.com/DivanteLtd/vue-storefront.git

git clone https://github.com/DivanteLtd/vue-storefront-api.git

2.安裝 vue-storefront-api 所需的軟件包

cd /var/www/vuestorefront/vue-storefront-api
yarn install

3.安裝 vue-storefront 所需的軟件包

cd /var/www/vuestorefront/vue-storefront
yarn install

4.複製 vue-storefront-api 設定檔

cp /var/www/vuestorefront/vue-storefront-api/config/default.json /var/www/vuestorefront/vue-storefront-api/config/local.json

5.複製 vue-storefront 設定檔

cp /var/www/vuestorefront/vue-storefront/config/default.json /var/www/vuestorefront/vue-storefront/config/local.json

6.請根據你設定的網址更改local.json

請根據以下檔案去更改你的local.json

Vue-storefront-api

https://raw.githubusercontent.com/DivanteLtd/vue-storefront/develop/docs/guide/installation/vue-storefront-api/config/local.json

Vue-storefront

https://raw.githubusercontent.com/DivanteLtd/vue-storefront/develop/docs/guide/installation/vue-storefront/config/local.json

7.使用 yarn start 啟動 vue-storefront 與 vue-storefront-api

cd vue-storefront-api
yarn start

cd vue-storefront
yarn start

到目前你已經完成最基本的vue-storefront建置，但是你現在其實是從他們的Magento站取用資料，查看 /var/www/vuestorefront/vue-storefront-api/config/local.json

"magento2": {
        "url": "http://demo-magento2.vuestorefront.io/",
        "imgUrl": "http://demo-magento2.vuestorefront.io/media/catalog/product",
        "magentoUserName": "",
        "magentoUserPassword": "",
        "httpUserName": "",
        "httpUserPassword": "",
        "api": {
            "url": "http://demo-magento2.vuestorefront.io/rest",
            "consumerKey": "byv3730rhoulpopcq64don8ukb8lf2gq",
            "consumerSecret": "u9q4fcobv7vfx9td80oupa6uhexc27rb",
            "accessToken": "040xx3qy7s0j28o3q0exrfop579cy20m",
            "accessTokenSecret": "7qunl3p505rubmr7u1ijt7odyialnih9"
        }
    },

以上就是本篇分享，下一章我們將講解如何將你的平台改為自己的服務，有興趣的朋友們千萬別錯過下一篇文章呦！我們下次見！
若有任何Magento的問題，歡迎隨時聯絡我們！

喜歡歐斯瑞文章的讀者們，別忘了追蹤歐斯瑞粉絲團及Instagram，更別忘了訂閱我們的電子報，隨時掌握第一手消息！！

文章參考:

https://docs.vuestorefront.io/guide/installation/production-setup.html#nginx

技術應用

Magento 1 Vue Storefront 環境建置（中篇）