Question

我目前正在使用Laravel 5.4和Vue.js开发一个网站。几个小时前我编辑了我的Example.vue文件，并使用Filezilla将其上传到我的服务器，一切正常。但不是我编辑了文件，并试图再次将其上传到服务器，网络服务器将.vue文件显示为旧文件，而不是新文件。

我已经尝试清除计算机缓存和服务器/ laravel缓存，但没有任何反应..我同时运行npm run dev和npm run watch，我没有收到任何错误。

当我在我的网站上检查元素时，我收到一条错误消息：TypeError: Cannot read property 'get' of undefined，但是已经在位于resources / assets / js的app.js中通过添加行Vue.use（require（' 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。您可以通过向package.json文件添加mix来安装mix。然后通过运行npm install --no-bin-links在mac和windows上运行npm install。然后通过运行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');

Homestead 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"
  }
}

Laravel Vue.js不会将文件更新到服务器

1 个答案: