如何使用Silex或其他PHP框架配置Vue2環境

我試圖將Vue2配置爲在本地開發環境中與Silex框架應用程序一起運行。我使用CLI工具創建了Vue應用程序。將/build/dev-server.js中的打開URL從http://localhost/+port更改爲http://localhost/，因此npm run dev將打開Silex應用程序。並在php視圖中添加了以下腳本url：http://localhost:8080/app.js。如何使用Silex或其他PHP框架配置Vue2環境

現在，當我運行npm run dev時，瀏覽器中的新選項卡將使用url http://localhost/創建。 Vue應用程序運行，我看到我的內容（所以webpack開發服務器運行）。問題是它不會重新加載。當我檢查瀏覽器控制檯時，我發現應用程序不斷嘗試打開http://localhost/__webpack_hmr。

所以現在的問題是，如何配置Vue公司的開發環境，它會與Silex的框架用熱裝載的http://localhost:80和的WebPack dev的服務器上工作http://localhost:8080，仍然能夠通過打開http://localhost/

來源

2017-10-21 Artur Stępień

我用來運行應用程序但是，在我的設置中沒有任何特別的Laravel特有的東西，所以對於存儲文件的任何位置，這應該是相同的：

首先，您需要確保您的腳本正在從webpack-dev-server加載，所以：

<script src="http://localhost:8080/app.js"></script>

我實際上已經把它置於一個基於環境變量的條件中，所以它只在我的開發系統中做到這一點，並且在生產中加載了捆綁的js。

接下來，您需要確保您的webpack dev配置app.js來自webpack-dev-server。你可以做，使用publicPath這應該指向你的JavaScript文件正在從服務的目錄：

output: { 
    path: path.resolve(__dirname, '../../../public/js/'), 
    publicPath: 'http://localhost:8080/js/', 
    filename: 'app.js' 
},

對於我而言，我還設置了路徑public/js因爲那是我的app.js文件是相對於webpack配置，所以只需將它設置爲silex中js文件的任何位置即可。現在

，你只是想配置開發服務器：使用npm-run-all

devServer: { 
    hot: true, // this enables hot reload 
    headers: { "Access-Control-Allow-Origin": "*" }, 
    host: "localhost", 
    port: 8080, 
    contentBase: path.join(__dirname, "../../../public"), // points to Laravel public folder 
},

我再添加一個NPM腳本package.json - 再一次，我指着我的PHP服務器的public文件夾：

"scripts": { 
    "serve": "php -S localhost:80 -t public, 
    "hmr": "webpack-dev-server --env=webpack.dev", 
    "dev": "npm-run-all --parallel hmr serve" 
}

現在你應該能夠做到：

npm run dev

來啓動這兩個服務器，然後訪問您的網站從http://localhost:80

來源

2017-10-21 14:11:54

我的package.json看起來有點不同。看看這個：''scripts'：「dev」：「node build/dev-server.js」，「start」：「node build/dev-server.js」，「build」：「node build /build.js「，」lint「：」eslint --ext .js，.vue src「 }，'我希望保持此設置儘可能接近庫存配置，同時保持其按預期工作。 –

在vue webpack中，他們只是運行一個節點腳本來啓動服務器並進行一些其他初始化。使用[Api proxying]（http://vuejs-templates.github.io）可以運行特定的開發過程/webpack/proxy.html），它看起來像通過[express]（https://www.npmjs.com/package/express）來完成，以避免CORS問題。當然，這仍然要求您提供webpack dev服務器中的所有內容，而不是PHP服務器，這意味着您不能使用Twig，並且需要通過'.html'文件掛載您的應用程序，這可能很好取決於你的設置。 –

謝謝@craig_h，您的回答指出我朝着正確的方向發展，我的解決方案與您的解決方案大約相當，如此接受您的90％。 –

如何使用Silex或其他PHP框架配置Vue2環境

回答

相關問題