我正在try 使用webpack dev server来编译文件并启动一个dev web服务器.

在my package.json中,我将脚本属性设置为:

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

因此,--hot--inline应该支持Web服务器和热重新加载(据我所知).

在我的webpack.config.js文件中,我设置了条目、输出和devServer设置,并添加了一个加载程序来查找.vue个文件中的更改:

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

我用这个设置运行npm run dev.webpack dev服务器启动,模块加载程序测试工作(即,当我保存任何.vue文件时,它会导致webpack重新编译),但是:

  • 浏览器从不刷新
  • 存储在内存中的已编译javascript永远无法供浏览器使用

在第二个项目中,我可以看到这一点,因为在浏览器窗口中,vue占位符永远不会被替换,如果我打开javascript控制台,vue实例永远不会被创建或全局可用.

Gif of issue

我错过了什么?

推荐答案

两件事导致了我的问题:

module.exports = {
    entry: './src/index.js',
    output: {

        // For some reason, the `__dirname` was not evaluating and `/public` was
        // trying to write files to a `public` folder at the root of my HD.
        path: __dirname + '/public', 

        // Public path refers to the location from the _browser's_ perspective, so 
        // `/public' would be referring to `mydomain.com/public/` instead of just
        // `mydomain.com`.
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{

        // `contentBase` specifies what folder to server relative to the 
        // current directory. This technically isn't false since it's an absolute
        // path, but the use of `__dirname` isn't necessary. 
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

以下是固定的webpack.config.js:

var path = require('path');

module.exports = {
    entry: [
        './src/PlaceMapper/index.js'
    ],
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/')
    },
    devtool: 'source-map',
    devServer:{
        contentBase: 'public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

Vue.js相关问答推荐

为什么v-show需要组件的包装元素?

为什么元素会从Vue 3中的TransitionGroup左上角出现?

Vue 3使用计算(computed)属性对象获取图像信息,在模板中呈现值时变为NaN

如果找不到路由,Vue.js如何重定向到公共路由

在重复内容区域中添加

避免在运行时向 Vue 实例或其根 $data 添加响应式属性

如何从 Vuex 状态使用 Vue Router?

如何在 vue 的 scss 中使用深度 Select 器

在 vue.js 中获取当前时间和日期

如何将 ASP.NET Core 2.1 与 Vue CLI 3 集成?

使用 vue.js 的 axios 预检失败错误 301

在 vue-router 中带有路由的 Vuejs2 模态

加载和渲染时对象值上的 Vue.js 未定义错误

数据更新后触发 Vue.js 事件

如何将 v-if 与 Vue.js 中的值进行比较

在加载数据之前触发mounted方法 - VueJS

Vue代理设置不起作用

如何在 vuetify 中将工具提示添加到数据表标题?

如何使用 Vue Test utils 测试输入是否聚焦?

Vue.js 3 - 替换/更新react性对象而不会失go react性