Laravel Vue.js不會將文件更新到服務器

Question

我目前正在使用Laravel 5.4和Vue.js開發一個網站。 幾個小時前，我編輯了Example.vue文件，並使用Filezilla將其上傳到我的服務器，並且一切正常。 但是並不是我已經編輯了文件，並試圖再次將其上傳到服務器，所以Web服務器將.vue文件顯示為舊文件，而不是新文件。

我嘗試清除計算機緩存和服務器/ laravel緩存，但是什么也沒有發生。.我同時npm run dev和npm run watch ，但沒有收到任何錯誤。

當我檢查網站上的元素時，我收到一條錯誤消息： TypeError: Cannot read property 'get' of undefined ，但這已通過添加行Vue.use（require）在resources / assets / js中的app.js中修復。 （'vue-resource'））;，但仍然出現與更新前相同的錯誤和相同的視圖。

第一次更新文件時，我只希望它顯示Hello World文本，並且在更新后實現了vue和div元素的加載功能后，它仍會顯示Hello World消息...

這是我的Example.vue文件：

 <template> <div class="container"> <div class="row"> <p class="text-center" v-if="loading"> Loading... </p> </div> </div> </template> <script> export default { mounted() { this.$http.get('/status/' + this.user_id ) .then((resp) => { console.log(resp) this.status = resp.body.status this.loading = false }) }, props: ['user_id'], data() { return { status: '', loading: true } } } </script> 

有誰知道我可以嘗試做？ 當它只是不會更新的.vue文件時，確實令人沮喪。.所有其他文件都正常工作！

Answer 1

您應該在webpack.mix.js文件中使用laravel mix。 您可以通過將mix添加到package.json文件中來安裝mix。 然后在Mac上運行npm install，在Windows上運行npm install --no-bin-links。 然后通過運行npm run dev laravel mix將編譯所有資源資源並將其更新到公用文件夾。 看到這里https://laravel.com/docs/5.4/mix 。 這將更新resources / assets / js / components文件夾中的所有vue組件，該文件夾應包含所有vue組件。 應該是這樣。 如果事情沒有更新，則可能必須運行npm run watch或npm run watch-poll來捕獲更新，因為它將檢查更改。

我的看起來像這樣：

webpack.mix.js：

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/assets/js');

mix.scripts([
    'resources/assets/js/enum_gender_select.js',
    'resources/assets/js/enum_title_select.js'
], 'public/assets/js/enum_select.js');


mix.sass('resources/assets/sass/app.scss', '../resources/assets/css/sass.css');

mix.styles([
    'resources/assets/css/app.css',
    'resources/assets/css/sass.css'
], 'public/assets/css/all.css');

宅基package.json文件：

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}