03-30 vue init webpack my-project 最新安装
执行 npm run dev 报错

目测是 webpack.prod.conf.js 中的这段没有考虑到 url-loader 的 query

// generate loader string to be used with extract text plugin
function generateExtractLoaders (loaders) {
  return loaders.map(function (loader) {
    return loader + '-loader' + (SOURCE_MAP ? '?sourceMap' : '')
  }).join('!')
}

got "author": "pandada8<[email protected]>".
same problem may exist in other official templates.

I'm a newbie for webpack.
I use vue-cli build a project. I want use jquery , bootstrapValidate, bootstrap.js, slide.js .....
Please help me. Thanks

After executing command npm run build, there are lots of empty logs:

...
Child extract-text-webpack-plugin:

Child extract-text-webpack-plugin:

Child extract-text-webpack-plugin:

Child extract-text-webpack-plugin:

Child extract-text-webpack-plugin:
...

My main.js:

import Vue from 'vue'
import Resource from 'vue-resource'

Vue.use(Resource)

//now it is ok, I can use vue-resource here like this:
Vue.resource(...)

In another module:

import Vue from 'vue'

Vue.resource // undefined

I also tried to configure webpack providePlugin:

    new webpack.ProvidePlugin({
      Vue: 'vue',

But it not solve my problem.

@yyx990803 Hi, I'm getting started with vue-webpack-boilerplate. I try to integrate vue-router with this template, but I have some trouble in changing view via router. When I start the server, I must reload the page to specific page through browser instead of vue-router, it seems like router doesn't work. I tried to figure out, but it's useless. I've been confused about it for a few days. Could you give me some advice or solutions? Thanks in advance.

I had already install coffee-script and coffee-loader, It doesn't works.

webpack built 3dfcf2ef9a16589d32fa in 4098ms
Hash: 3dfcf2ef9a16589d32fa
Version: webpack 1.12.14
Time: 4098ms
 Asset     Size  Chunks       Chunk Names
app.js  1.04 MB       0       app

ERROR in ./src/components/Hello.vue

  error    Parsing error: Unexpected token :  
  /home/xmrg/share/wechat-anonymous-moments/src/components/Hello.vue:9:7
    data:->
         ^


✖ 1 problem (1 error, 0 warnings)

Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  21.1 kB       0       
webpack: bundle is now VALID.

Hello.vue:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="coffee">
module.exports=
  data:->
    msg:123
</script>

Fresh install. Playing with Hello.vue, under npm run dev.

I've added

<style>
h1 { color: red }
</style>

and saved the file. The style has been hot-loaded and applied. Great!

Then, I've undone the change (removed the <style> I've added), and saved again. No change in the browser...

I had to add an empty <style></style> and save the file to see the styles removed in the browser.

Then, I could finally remove the tag, since the "undo" was done.

I had some problems linting (.vue) files in editor ... Fix it when see this http://forum.vuejs.org/topic/356/will-the-sublimelinter-jscs-be-able-to-work-under-the-vue-file-s-script-tag/2

Can we add vue-router to this template please? Seems like an unusual omission.

Hello, thanks for great boilerplate, it already saved me a lot of time, HMR is awesome 👍
However I can't get vue-router to work.
Can someone point me how main.js should look?
I know I should include something like this

import VueRouter from 'vue-router'
import { configRouter } from './route-config'

// install router
Vue.use(VueRouter)

// create router
const router = new VueRouter({
  history: true,
  saveScrollPosition: true
})

// configure router
configRouter(router)

router.start(App, '#app')

but I don't know how to mix it with current

import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
})

Hi,

i'm trying to use hot-reloading (with vue-cli webpack) inside a virtual machine (with a custom domain name : website.dev).
(the virtual machine is laravel homestead: https://laravel.com/docs/5.2/homestead)

From the outside of the vm at localhost:8080 every thing is working fine.
whereas from the vm, everything looks fine too, but hot reloading is not working at website.dev:8080

Following you recomandation i've tried to set up a devServer.proxy without success.

Can you share some example of devServer.proxy ?

thanks :3

Hi,

using this template, where are bower files supposed to be stored?
In /static or to /src/assets? How to you then access them? Will vue-loader affect them in some way?

Thanks and good bye

我昨天开始研究这个新的vue-cli的模板，发现当把extract改成true（即将css抽成一个文件）

vue: {
    loaders: cssLoaders({
      sourceMap: false,
      extract: true
    })

报了一下错误：

ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js!./~/vue-loader/lib/selector.js?type=style&index=0!./src/App.vue
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (d:\code\datax-admin-fe\node_modules\extract-text-webpack-plugin\loader.js:21:9)
 @ ./src/App.vue 2:0-267

好像是插件没加的缘故，然后在webpack.dev.conf.js里面加上

plugins: [
    ..
    new ExtractTextPlugin("app.css"),
    ..
  ]

就好了，这个算是bug吗？

Running npm-check-updates (ncu) to check for newer versions, I'm getting:

 babel-runtime                 ^5.8.0  →  ^6.3.19 
 extract-text-webpack-plugin   ^0.9.1  →   ^1.0.1 
 html-webpack-plugin           ^1.7.0  →   ^2.8.1 
 karma-phantomjs-launcher      ^0.2.1  →   ^1.0.0 
 phantomjs                    ^1.9.19  →   ^2.1.3 

Would you mind updating these in the template's package.json?

In fact, phantomjs is generating a deprecation warning:

npm WARN deprecated [email protected]: this package has been reintegrated into npm and is now out of date with respect to npm

├─┬ [email protected] 
│ ├── [email protected] 
...
│ ├─┬ [email protected] 

I would update them all myself, but I'm afraid I'd enter into compatibility issues with babel-runtime... or any other dependency.

CSS line numbers are incorrect in linters (stylint) and preprocessor error messages (webpack, stylus..)

Check out the line numbers.

Not sure where this issue should actually live: webpack html extract loader, vue-loader, vue-style-loader, css-loader.js? If someone gives me a hint I'll take a crack at fixing it.

I have a few ideas but there's probably an easier way of fixing it than anything I can come up with. Seems like one of those webpack plugins needs to pad empty lines for the html and js that's no longer in there. Or maybe re-number the source maps or something like that.

Let me know if I should move the issue somewhere else.

Hi everybody,

I'm trying hot-reload with chrome and the only way to success is with the production flag enabled on my .npmrc file

I'm running the build command npm run dev

Thanks for all your great job!

npm run e2e fails on windows due to known windows limitations in node spawn (will not locate the generated nightwatch.cmd)

Resolve by using https://github.com/IndigoUnited/node-cross-spawn instead:

in e2e/runner.js
var runner = require('cross-spawn').spawn('./node_modules/.bin/nightwatch',

When i run npm run dev on windows 7 os in git bush terminal webpack says that the url is http://0.0.0.0:8080/ but it doesn't work.It works on localhos:8080.

My style bindings are not working after I build the code for production (I'm using the Webpack skeleton initially generated by vue-cli).

The code is for a simple parallax component - you can find it here: https://gist.github.com/esahione/6a7dc75f1dec971c4c06

Here's my Webpack production config file: https://gist.github.com/esahione/c8d75d51ff7e59b10d5a
And here's the Webpack development configuration file: https://gist.github.com/esahione/c305121816040f849547

The code should be self explanatory. It works flawlessly on development, but when I try to build it for production it stops working. In fact, when I look at the code through the browser there is no style tag.

Is this a bug? How can I fix it?

Hi. I've been looking around the source code of Vue and a ton of examples, and there's a thing that I just don't find documented anywhere.

When/Why should I use the ``</app> tag?
https://github.com/vuejs-templates/webpack/blob/master/template/src/index.html#L8

... the lack of this tag in my template caused me a 2 hour debugging marathon yesterday, since my Vue app didn't render.

Thanks!

Hello,
I'm just trying this boilerplate and tested to build the project with npm run build. However, once built and opened in the browser, it seems it doesn't find static files. So, the webapp doesn't work even when served by http-server.

Finally, I changed the publicPath in webpack.conf.js from /static/ to ./static/ and it seems to work now.

Whenever I try to set up the vue router with this template I end up getting a Cannot GET / message in my browser. I have a project from a couple weeks ago, using this same template, and it works fine there. The major different that I've noticed is the build/webpack.dev.conf.js file has changed a lot. If I copy the other one over from my working project it starts working again.

To reproduce just set up a new project using this template from the cli and try to set up vue-router. Maybe I'm just doing it wrong too.

Hi there,

Just to start: amazing work on vue-cli and the templates. Got everything up in literally 5 minutes.
I do run into an issue with Hot Reloading though.

When I check the console, I see HMR working when I save the basic Hello.vue file, but the console then says:

[HMR] Updated modules:
[HMR]  - 85
[HMR]  - 84
[HMR] App is up to date.

Nothing then changes, even though I've updated Hello world! to Foo world!.
Any thoughts?

BTW: it does work if I add HTML for example, just not when I update the JS.

Considering this recent commit: 424f919

I wonder if the # symbol should also be prepended at
https://github.com/vuejs-templates/webpack/blob/master/template/build/karma.conf.js#L3

in windows os, assets path join by “\” , can't work in css

exampe:
background:url(/static\bg.7c10625.png)

npm run e2e fails on windows because it can't find the chrome driver. Nightwatch conf needs a ".exe" after the chrome driver path to work: https://github.com/vuejs-templates/webpack/blob/master/template/test/e2e/nightwatch.conf.json#L12

I'm just going to open and close this so there's some documentation.

Hi,

I have spent some time to figurate out I need the `vue-html-loader' to import well html files with vue template code. Otherwise the syntax as '@click' for example would give some troubles. But I don't see the loader is set by default for html files and wondering if there is any reason?

I'm sure many other users would also split their templates into partials and would get into this difficult to debug issue. I could send a PR if clarified. Thanks.

目前版本，模版本身开发时浏览器不会报错，在我自己的项目中，在浏览器加载后就会SourceMap报错，不知什么原因。貌似最近更新之前没有这个问题。难道SourceMap这个和我写的代码有关系？

没有做任何修改

Has any experienced this issue recently after running npm run build.

1. The production build contains warnings and the build file size is larger in the latest version.
2. Vue Dev Tool detects the production build.

Vue.js v1.0.14
Vue-cli v1.0.1

It would be great to have a default .editorconfig file, since AFAIK the setup enforces strict 2-space indentation and spaces before and after function declaration brackets.

Steps (on Windows 7):

1. vue cli webpack myApp
2. npm install
3. npm run build

As for me, I get this output:

User@User-PC MINGW64 /E/alex/buildTest
$ npm run build

> buildTest@ build E:\alex\buildTest
> rimraf dist && mkdirp dist && ncp static dist/static && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.prod.conf.js
                         Hash: b70123bf6740c50d4bde
Version: webpack 1.12.14
Time: 5205ms
                                       Asset       Size  Chunks             Chunk Names
                 app.f274887a001873610c97.js    84.8 kB       0  [emitted]  app
    app.4b7e81fcd187c952b6e89f542e1494da.css  482 bytes       0  [emitted]  app
             app.f274887a001873610c97.js.map     666 kB       0  [emitted]  app
app.4b7e81fcd187c952b6e89f542e1494da.css.map  966 bytes       0  [emitted]  app
                               ../index.html  241 bytes          [emitted]
Child html-webpack-plugin for "..\index.html":

Child extract-text-webpack-plugin:

As you can see, the default assets/logo.png file isn't generated. Is this a default or a bug? If the latter, how to fix it?

1. First install 'node-sass' and 'sass-loader'
2. Then in the project main.js, import scss file, like:

reqire('path-to/test.scss')

Then when i run 'npm run build', there always expose an error:

ERROR in ./src/scss/app.scss
Module parse failed: /Users/jade/Documents/project/workspace/hk/online_jd/wapdev/paotuibang-new/src/scss/app.scss Line 2: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| /** IMPORTS **/
| @import "./variables.scss";
|
| /** GLOBALS **/
 @ ./src/main.js 31:0-26

For simple solution is to add 'scss' loader config inside webpack config file. But how to integrate it with 'css-loaders'?

npm run build

vue-test@ build /data/www/test/vue-test
rimraf dist && webpack --progress --hide-modules --config build/webpack.prod.conf.js

/data/www/test/vue-test/build/webpack.prod.conf.js:25
config.vue.loaders = {
^

TypeError: Cannot set property 'loaders' of undefined
at Object. (/data/www/test/vue-test/build/webpack.prod.conf.js:25:20)
at Module._compile (module.js:410:26)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at module.exports (/data/www/test/vue-test/node_modules/webpack/bin/convert-argv.js:80:13)
at Object. (/data/www/test/vue-test/node_modules/webpack/bin/webpack.js:39:40)
at Module._compile (module.js:410:26)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:442:10)
at startup (node.js:136:18)
at node.js:966:3

i get the new templates today,but the console show me this error "Uncaught TypeError: Cannot read property 'children' of undefined"
yesterday, in the other project,the code is ok
i'm only copy it to the new one then get the error
-----------index.html

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>manage</title>
     </head>
    <body>
        <router-view></router-view>
        <!-- built files will be auto injected -->
    </body>
</html>

-----------main.js

import Vue from 'vue'
var App = Vue.extend({})
import VueRouter from 'vue-router'
Vue.use(VueRouter)
mport account from './views/UserAccount'
var router = new VueRouter()
router.map({
    '/': {
        component: account
    },
    '/account': {
        component: account
    }
})
router.start(App, 'body')

Steps to reproduce:

• Create new project (https://github.com/vuejs-templates/webpack#usage)

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install

• Install jade deps (https://github.com/vuejs/vue-loader/blob/master/docs/configurations/pre-processors.md#templates)

$ npm install template-html-loader jade --save-dev

• Edit src/components/Hello.vue, transforming the template to jade syntax

<template lang="jade">
  div.hello
    h1.
      {{ msg }}
</template>

• Build

$ npm run build

Result:

> my-project@ build /home/jbruni/TT/temp/my-project
> rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.prod.conf.js

Hash: 831fadef5c178816535e  
Version: webpack 1.12.13
Time: 5146ms
                                       Asset       Size  Chunks             Chunk Names
                 app.1d3b2b4d38325cdb6c85.js    83.7 kB       0  [emitted]  app
    app.6b590370d011a33cd6d0437256238024.css  106 bytes       0  [emitted]  app
             app.1d3b2b4d38325cdb6c85.js.map     656 kB       0  [emitted]  app
app.6b590370d011a33cd6d0437256238024.css.map  303 bytes       0  [emitted]  app
                               ../index.html  242 bytes          [emitted]  

ERROR in ./~/vue-html-loader!./~/template-html-loader?raw&engine=jade!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/Hello.vue
Module build failed: TypeError: Cannot read property '0' of undefined
    at Object.module.exports.processComment (/home/jbruni/TT/temp/my-project/node_modules/espree/lib/comment-attachment.js:107:133)
    at Parser.esprimaFinishNode (/home/jbruni/TT/temp/my-project/node_modules/espree/espree.js:185:27)
    at Parser.finishNode (/home/jbruni/TT/temp/my-project/node_modules/espree/espree.js:234:34)
    at Parser.pp.parseIdent (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:673:15)
    at Parser.pp.parseExprAtom (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:276:21)
    at Parser.pp.parseExprSubscripts (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:216:19)
    at Parser.pp.parseMaybeUnary (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:197:19)
    at Parser.pp.parseExprOps (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:151:19)
    at Parser.pp.parseMaybeConditional (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:133:19)
    at Parser.pp.parseMaybeAssign (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:110:19)
    at Parser.pp.parseExpression (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:86:19)
    at Parser.pp.parseStatement (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:1750:23)
    at Parser.pp.parseTopLevel (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:1666:21)
    at Parser.parseTopLevel (/home/jbruni/TT/temp/my-project/node_modules/espree/espree.js:274:30)
    at Parser.parse (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:1636:17)
    at Object.parse (/home/jbruni/TT/temp/my-project/node_modules/acorn/dist/acorn.js:905:44)
    at reallyParse (/home/jbruni/TT/temp/my-project/node_modules/acorn-globals/index.js:30:18)
    at findGlobals (/home/jbruni/TT/temp/my-project/node_modules/acorn-globals/index.js:45:11)
    at addWith (/home/jbruni/TT/temp/my-project/node_modules/with/index.js:44:28)
    at parse (/home/jbruni/TT/temp/my-project/node_modules/jade/lib/index.js:149:9)
    at Object.exports.compile (/home/jbruni/TT/temp/my-project/node_modules/jade/lib/index.js:205:16)
    at handleTemplateCache (/home/jbruni/TT/temp/my-project/node_modules/jade/lib/index.js:174:25)
    at Object.exports.render (/home/jbruni/TT/temp/my-project/node_modules/jade/lib/index.js:349:10)
    at Object.exports.render (/home/jbruni/TT/temp/my-project/node_modules/jade/lib/index.js:335:21)
    at Function.exports.jade.render (/home/jbruni/TT/temp/my-project/node_modules/consolidate/lib/consolidate.js:182:10)
    at Object.module.exports (/home/jbruni/TT/temp/my-project/node_modules/template-html-loader/index.js:32:20)
 @ ./src/components/Hello.vue 3:19-166
Child html-webpack-plugin for "../index.html":

Child extract-text-webpack-plugin:

So I'm trying to use vue-cli to work with our PHP app (old CakePHP 2.6 sadly). I've got it so that it builds with npm run build and then injects the <script> tag into our main template file default.ctp, sourcing a default-source.ctp just fine. However, npm run dev seems to emit the updated JS, but does not update the default.ctp file. It also does not reload the page.

I'm not sure where the missing link is with this. I can link to some files if you'd like to see the setup.

I read the docs thoroughly, but it seems that the config info set in these docs only addresses build though. Maybe that's the issue?

Hello, I just need to sketch simple app, debugging style errors are more time consuming than I can afford.
Is there any switch to turn it off temporarily? It's nice feature but not when you have only few minutes to make something :)

Hi,

Simple question, i have cloned the repo, and i don't understand why i can use by default

<template lang="jade">
</template>

but i have to install stylus-loader for

<style lang="stylus">
</style>

and

coffee-script + coffee-loader for

<script lang="coffee">
</script>

I'm missing something ?

Thanks :)

GET file:///E:/static/app.a941263badf7da004771.js net::ERR_FILE_NOT_FOUND

Changing it to ./static or static will fix.

I found that it's really frustrating being forced to use a JS style guide. I believe linting errors and warnings should only pop up on real code issues and not for using a different number of spaces for indentation.

I like using semi colons to end statements, this might be a very uncommon example, but the JS engine will interpret the following …

return
{
    prop: 'val'
}

as

return;
{
    prop: 'val'
};

By automatically adding its own semi colons and it would actually return nothing instead of the object I was expecting. Having semi colons helps avoiding these kind of issues (although the example I'm using is anything but common)

TL:DR; Don't stop me from using the style that I'm most comfortable with. Ship the template with sane ESLint rules that won't stop me from actually writing code.

I started a new project with vue-cli and noticed what less styles in my components can't use resolve.alias from webpack.
To test that you can add style to hello component eg:

<style scoped lang="less">
  @import "src/less/theme";

  .hello {
    color: @theme-primary;
  }
</style>

I tried to add less to the resolve.extensions in build/webpack.base.conf.js like so:

  resolve: {
    extensions: ['', '.js', '.vue', '.less'],
    alias: {
      'src': path.resolve(__dirname, '../src')
    }
  },

But it isn't working for me.

Webpack error:

ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=_v-94e51594&scoped=true!./~/less-loader!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/Hello.vue
Module build failed: Cannot resolve 'file' or 'directory' ./src/less/theme.less in /abs../path../to../project.../src/components
 @ /abs../path../to../project.../src/components/Hello.vue (line 2, column 0)
 near lines:

   @import "src/less/theme";

 @ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=_v-94e51594&scoped=true!./~/less-loader!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/Hello.vue 4:14-279 13:2-17:4 14:20-285

Sorry, stupid question ;) Which way do you recommend to integrate jquery to be reachable as global?

I have all the time error messages like Uncaught Error: Cannot find module 'jquery'

Tried it with the following code in main.html <script>window.$ = window.jQuery = require('jquery')</script>.

I will try to play with Semantic UI, Vue and this boilerplate https://github.com/bradstewart/electron-boilerplate-vue (which uses this webpack configuration).

I have to add app.use('/assets',express.static('./src/assets')) to make it work.
https://segmentfault.com/q/1010000004479605

I'm running into a dependence installing issue on Ubuntu 14.04.

npm WARN optional dep failed, continuing [email protected] Killed

Since the last few commits, the css are embeded in the JS files.
This happens only with the vue-router lazy-load method :

// This works fine, css are extracted.
router.map({
  '/guest': {
    name: 'login',
    component: require('containers/Guest/Guest')
  }
})

// This doesn't work, css are extracted but also remains in the JS chunk
router.map({
'/guest': {
    name: 'login',
    component: function (resolve) {
      require(['containers/Guest/Guest'], resolve)
    }
})

Moved from vuejs/vue-cli#19

It seems extract-text-webpack-plugin fails to resolve on Linux (works fine on OSX).

Would appreciate anyone with experience with Webpack on Linux look into this.