vuejs-templates / webpack Goto Github PK
View Code? Open in Web Editor NEWA full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
License: MIT License
A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
License: MIT License
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?
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
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>
Steps (on Windows 7):
vue cli webpack myApp
npm install
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?
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 }
})
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).
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'?
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
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
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.
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!
我昨天开始研究这个新的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吗?
@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 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')
Has any experienced this issue recently after running npm run build
.
Vue.js v1.0.14
Vue-cli v1.0.1
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm install template-html-loader jade --save-dev
src/components/Hello.vue
, transforming the template to jade syntax<template lang="jade">
div.hello
h1.
{{ msg }}
</template>
$ npm run build
> 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:
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.
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?
in windows os, assets path join by “\” , can't work in css
exampe:
background:url(/static\bg.7c10625.png)
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.
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:
...
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.
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!
目测是 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('!')
}
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
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.
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
GET file:///E:/static/app.a941263badf7da004771.js net::ERR_FILE_NOT_FOUND
Changing it to ./static
or static
will fix.
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 :)
目前版本,模版本身开发时浏览器不会报错,在我自己的项目中,在浏览器加载后就会SourceMap报错,不知什么原因。貌似最近更新之前没有这个问题。难道SourceMap这个和我写的代码有关系?
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.
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',
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.
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
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.
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)
}
})
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
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.
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.
got "author": "pandada8<[email protected]>"
.
same problem may exist in other official templates.
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 :)
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.
CSS line numbers are incorrect in linters (stylint) and preprocessor error messages (webpack, stylus..)
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.