easy-team / egg-vue-webpack-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

1.4K 49.0 248.0 7.91 MB

Egg Vue Server Side Render (SSR) / Client Side Render (CSR)

Home Page: https://easyjs.cn/egg-vue

License: MIT License

JavaScript 42.36% Vue 28.59% CSS 27.50% HTML 0.47% Smarty 1.08%

egg webpack vue vuex vue-router axios server-side-rendering isomorphic webpack3 server-side

egg-vue-webpack-boilerplate's Issues

__INITIAL_STATE__ 优先于options.data()

https://github.com/hubcarl/egg-vue-webpack-boilerplate/blob/3593fe9018195e7f5b38a1d9cdedb5a20ac7007f/app/web/framework/vue/entry/client.js#L22

这个地方这样是不是更合理

options.data = Object.assign(options.data && options.data(), window.__INITIAL_STATE__);

__INITIAL_STATE__应该覆盖data的数据

Controller中下面exports.index写法ok，但是用类的写法就不支持么？

// exports.index写法ok
// exports.index = function* (ctx) {
// yield ctx.render('index/index.js');
// };

// class写法不ok
module.exports = app => {
class homeController extends app.Controller {
* index() {
console.log('app=====', app)
yield this.ctx.render('index/index.js', this.ctx);
}
}

return homeController;
};

目前服务端渲染是否不支持Egg.js 2.0?

使用easywebpack直接生成的项目将egg升级到2.0.0后，服务端渲染时会500

// ext -> viewEngineName -> viewEngine
  async [RENDER](name, locals, options = {}) {
    // retrieve fullpath matching name from `config.root`
    const filename = await this.viewManager.resolve(name);
    options.name = name;
    options.root = filename.replace(path.normalize(name), '').replace(/[\/\\]$/, '');

    // get the name of view engine,
    // if viewEngine is specified in options, don't match extension
    let viewEngineName = options.viewEngine;
    if (!viewEngineName) {

这段代码报错：filename.replace is not a function

Can't resolve 'vertx' in '/node_modules/es6-promise/dist'

在web/page/story 文件夹下面新建两个vue文件，build之后会报警

TypeError: Cannot read property 'default' of null

新建的项目运行build报错

a git:(master) ✗ npm run build

> a@3.0.2 build /Users/test/project/a
> cross-env easywebpack build prod

easywebpack: install webpack dynamic plugin npm module:
 [ 'imagemin-webpack-plugin@^1.5.2' ]
/Users/test/project/a/node_modules/easywebpack/lib/base.js:318
            Clazz = Clazz[configInfo.entry];
                                    ^

TypeError: Cannot read property 'default' of null
    at Object.keys.forEach.name (/Users/test/project/a/node_modules/easywebpack/lib/base.js:318:37)
    at Array.forEach (<anonymous>)
    at WebpackClientBuilder.createPlugin (/Users/test/project/a/node_modules/easywebpack/lib/base.js:303:26)
    at WebpackClientBuilder.createWebpackPlugin (/Users/test/project/a/node_modules/easywebpack/lib/base.js:354:17)
    at WebpackClientBuilder.create (/Users/test/project/a/node_modules/easywebpack/lib/base.js:365:21)
    at WebpackClientBuilder.create (/Users/test/project/a/node_modules/easywebpack/lib/client.js:67:18)
    at builders.forEach.builder (/Users/test/project/a/node_modules/easywebpack/lib/builder.js:18:41)
    at Array.forEach (<anonymous>)
    at Object.exports.getWebpackConfig (/Users/test/project/a/node_modules/easywebpack/lib/builder.js:13:12)
    at Object.exports.getWebpackConfig.config [as getWebpackConfig] (/Users/test/project/a/node_modules/easywebpack-vue/index.js:9:37)
    at Object.exports.build.config [as build] (/usr/local/lib/node_modules/easywebpack-cli/lib/builder.js:53:37)
    at Command.program.command.description.action.env (/usr/local/lib/node_modules/easywebpack-cli/bin/cli.js:59:13)
    at Command.listener (/usr/local/lib/node_modules/easywebpack-cli/node_modules/commander/index.js:300:8)
    at emitTwo (events.js:125:13)
    at Command.emit (events.js:213:7)
    at Command.parseArgs (/usr/local/lib/node_modules/easywebpack-cli/node_modules/commander/index.js:635:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `cross-env easywebpack build prod`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/test/.npm/_logs/2017-10-12T09_47_12_127Z-debug.log

Error: spawn easywebpack ENOENT

windows 7 下，我执行了
git clone ....
npm install
npm install easywebpack --save-dev

然后准备Build prod时报错。我怎么办才好呢？

过程如下：
C:\Users\xuzho\Work\Nodejs\egg-vue-webpack-boilerplate>npm run build

[email protected] build C:\Users\xuzho\Work\Nodejs\egg-vue-webpack-boilerplate
cross-env easywebpack build prod

'easywebpack' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
events.js:182
throw er; // Unhandled 'error' event
^

Error: spawn easywebpack ENOENT
at notFoundError (C:\Users\xuzho\Work\Nodejs\egg-vue-webpack-boilerplate\node_modules\cross-spawn\lib\enoent.js:11:11)
at verifyENOENT (C:\Users\xuzho\Work\Nodejs\egg-vue-webpack-boilerplate\node_modules\cross-spawn\lib\enoent.js:46:16)
at ChildProcess.cp.emit (C:\Users\xuzho\Work\Nodejs\egg-vue-webpack-boilerplate\node_modules\cross-spawn\lib\enoent.js:33:19)
at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: cross-env easywebpack build prod
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xuzho\AppData\Roaming\npm-cache_logs\2017-08-20T15_29_53_082Z-debug.log

Cannot find module 'webpack/lib/RequestShortener'

npm i之后警告如下

npm WARN [email protected] requires a peer of webpack@^1.0||^2.1.0-beta||^2.2.0-rc but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] requires a peer of webpack@>=2.2.0 but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] requires a peer of webpack@^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3.0.0 but none is installed. You must install peer dependencies yourself.

忽略之后报如下错误
Cannot find module 'webpack/lib/RequestShortener'

Node 版本 v6.9.2

怎么改变启动服务后，弹出浏览器的7001端口

启动服务后，会打开浏览器，这时候访问的是7001端口，但是却不是我配置的，这应该怎么改呢？

同一界面中，多个模板，使用不同的渲染方式

你好，在vue中，怎么实现：同一界面中，多个模板，使用不同的渲染方式。
假设在A页面中，a模板用服务端渲染，a2模板用客户端渲染

可以去掉框架集成的node-scss

Windows环境下开发，安装node-scss较为繁琐，部分项目不使用scss，建议从框架中去掉，或者做成可插拔的形式。

windows环境npm start报错

windows系统上npm start报以上截图的错误。麻烦您帮忙看下~

server render bundle error, try client render, the server render error ReferenceError: window is not defined

2017-10-11 16:10:54,491 ERROR 3081 [story/story.js] server render bundle error, try client render, the server render error ReferenceError: window is not defined
at VueComponent.data (vue_ssr_bundle:4820:19)
at VueComponent.mergedInstanceDataFn (/Users/dbsg/WebstormProjects/page_8pig_com/node_modules/vue/dist/vue.runtime.common.js:1150:21)
at getData (/Users/dbsg/WebstormProjects/page_8pig_com/node_modules/vue/dist/vue.runtime.common.js:3228:17)
at initData (/Users/dbsg/WebstormProjects/page_8pig_com/node_modules/vue/dist/vue.runtime.common.js:3187:7)
at initState (/Users/dbsg/WebstormProjects/page_8pig_com/node_modules/vue/dist/vue.runtime.common.js:3118:5)
at VueComponent.Vue._init (/Users/dbsg/WebstormProjects/page_8pig_com/node_modules/vue/dist/vue.runtime.common.js:4289:5)
at new VueComponent (/Users/dbsg/WebstormProjects/page_8pig_com/node_modules/vue/dist/vue.runtime.common.js:4461:12)
at vue_ssr_bundle:1735:15
at /Users/dbsg/WebstormProjects/page_8pig_com/node_modules/vue-server-renderer/build.js:7803:43
at /Users/dbsg/WebstormProjects/page_8pig_com/node_modules/vue-server-renderer/build.js:7800:14

这个错误的原因是啥啊，还有index.js和layout.html哪个是基本模版啊，首页好像用的是layout,里面的story用的是index.js，，，菜鸟求解答

在访问路由http://172.16.13.183:7001/test 时报下面的错误，其它路由都ok,怎么解决？

2017-07-25 22:05:18,793 ERROR 18442 [test/test.js] server render bundle error, try client render, the server render error TypeError: Cannot read property 'render' of undefined
at normalizeRender (/Users/dang/work/egg-vue-webpack-boilerplate/node_modules/vue-server-renderer/build.js:6864:19)
at render (/Users/dang/work/egg-vue-webpack-boilerplate/node_modules/vue-server-renderer/build.js:7211:5)
at Object.renderToString (/Users/dang/work/egg-vue-webpack-boilerplate/node_modules/vue-server-renderer/build.js:7647:9)
at /Users/dang/work/egg-vue-webpack-boilerplate/node_modules/vue-server-renderer/build.js:7956:22
at process._tickCallback (internal/process/next_tick.js:109:7)

js文件请求端口是8090，报错，请问怎样解决？

新版本加载iview的css文件时报错

./node_modules/[email protected]@iview/dist/styles/fonts/ionicons.eot?v=2.0.0
Module parse failed: H:\egg-vue-webpack-boilerplate\node_modules\[email protected]@iview\dist\styles\fonts\ionicons.eot?v=2.0.0 Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/[email protected]@iview/dist/styles/iview.css 6:5029-5068 6:5086-5125
 @ ./app/web/page/app/app.js
 @ multi ./node_modules/[email protected]@webpack-hot-middleware/client?path=http://127.0.0.1:9000/__webpack_hmr&noInfo=false&reload=false&quiet=false ./app/web/page/app/app.js
./node_modules/[email protected]@iview/dist/styles/fonts/ionicons.svg?v=2.0.0
Module parse failed: H:\egg-vue-webpack-boilerplate\node_modules\[email protected]@iview\dist\styles\fonts\ionicons.svg?v=2.0.0 Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <!--
 @ ./node_modules/[email protected]@iview/dist/styles/iview.css 6:5320-5359
 @ ./app/web/page/app/app.js
 @ multi ./node_modules/[email protected]@webpack-hot-middleware/client?path=http://127.0.0.1:9000/__webpack_hmr&noInfo=false&reload=false&quiet=false ./app/web/page/app/app.js
./node_modules/[email protected]@iview/dist/styles/fonts/ionicons.ttf?v=2.0.0
Module parse failed: H:\egg-vue-webpack-boilerplate\node_modules\[email protected]@iview\dist\styles\fonts\ionicons.ttf?v=2.0.0 Unexpected character '

是不是webpack没有配置css呢，我看设置那里留了个mint-ui的口子，应该怎么处理，添加路径吗？

linux 环境运行不起来

Error: spawn easywebpack ENOENT
at exports._errnoException (util.js:1016:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:189:19)
at onErrorNT (internal/child_process.js:366:16)
at _combinedTickCallback (internal/process/next_tick.js:102:11)
at process._tickCallback (internal/process/next_tick.js:161:9)
at Function.Module.runMain (module.js:607:11)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: cross-env easywebpack build prod
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.

vuex 获取 app.locals

项目的一些配置放在了config.local.js这些配置文件中，请问vuex中怎么能读取到这些配置呢？

可以出个react版的吗

正在规划，你这边有兴趣做不？也可以参与进来

Win10开发单页面应用的时候写在template里面的style没有被编译

在模板内通过import也不行

build上线环境prod，运行报错：Internal Server Error, real status: 500

下载的最新脚手架，操作顺序：
npm i
npm start //开发模式一切正常
npm run build 或 npm run build-prod

npm run start-prod //运行
open: 127.0.0.1:7001 报错：Internal Server Error, real status: 500

logs/common-error.log 日志
2017-06-27 17:35:34,718 ERROR 89977 [index/index.js] server render bundle error, try client render, the server render error ReferenceError: index is not defined

2017-06-27 17:35:34,720 ERROR 89977 [-/::1/-/2ms GET /] nodejs.ReferenceError: title is not defined

访问主页，有两条错误日志

项目内没有做修改，麻烦看一下什么原因。

how to change the static port (img path)

服务端渲染问题

引用一些外部插件时，总是会warning 推荐我使用renderClient来进行渲染。并且报一个document is not defined的错误。请问一下这是什么原因呢

多页面服务端渲染配置vuex问题

//client.js

import store from '../../../store'

App.render = options => {
  Vue.prototype.$http = require('axios');
  if (options.store) {
    options.store.replaceState(App.data());
  } else if (window.__INITIAL_STATE__) {
    options.data = Object.assign(window.__INITIAL_STATE__, options.data && options.data());
  }

  options.store=store
  const app = new Vue(options);
  app.$mount('#app');
};

computed:{
        loading:function () {
            return this.$store.getters.loading
        }
    },
这时控制器报错“Cannot read property 'getters' of undefined”;但能取到值
=============================================
mounted(){
        console.log(_this.$store.getters.loading)
    }
这样就不报错，也能取到值
求解；是不是配置错了

egg结合单页面应用RESTful API路由应如何设计？

1.3.0 在windows 10 下 npm start Build 失败！

ERROR in ./~/babel-loader/lib!./app/web/framework/vue/entry/client-loader.js!./app/web/page/about/about.vue
Module not found: Error: Can't resolve 'Coilerplate.1.3.0appwebpageaboutabout.vue' in 'C:\boilerplate.1.3.0\app\web\page\about'
 @ ./~/babel-loader/lib!./app/web/framework/vue/entry/client-loader.js!./app/web/page/about/about.vue 13:41-96
 @ multi (webpack)-hot-middleware/client?path=http://127.0.0.1:9000/__webpack_hmr&noInfo=false&reload=false&quiet=false babel-loader!./app/web/framework/vue/entry/client-loader.js!./app/web/page/about/about.vue

...

2017-08-22 23:04:33,097 ERROR 20420 [-/127.0.0.1/-/45ms GET /] nodejs.TypeError: Cannot read property 'index/index.js' of undefined
at Resource.inject (C:\boilerplate.1.3.0\node_modules\egg-view-vue-ssr\lib\resource.js:152:44)
at Object.render (C:\boilerplate.1.3.0\node_modules\egg-view-vue-ssr\app\extend\context.js:30:39)
at render.next ()
at onFulfilled (C:\boilerplate.1.3.0\node_modules\co\index.js:65:19)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

transform-runtime

默认的babel没有安装transform-runtime,使用async/await，渲染时提示
regeneratorRuntime is not defined

能增加对vux的示例吗？

服务器端渲染的时候，data()里的this 没有指向 vue对象

  data() {
    console.log(this)
return {
}
}

http://hubcarl.github.io/easywebpack 访问不了

http://hubcarl.github.io/easywebpack 是不是挂了

less 函数，编译不通过

<style lang="less"> .ziti(@c: #C7C7C7) { color: @c; } .some { .ziti(#000) } </style>
不用到函数的时候，less没有问题。

单页应用vue-router命名视图在子组件内创建不生效

单页应用Vue-router无法在子组件内添加
router路由components 没有效果显示

router.js
{ path: '/', components: { default: ListView, demo: () => import('./demo.vue') // demo: demoTest } }

复现地址：
ZQun/egg-vue-webpack-boilerplate@5260f08

如果有的页面不想让vue-ssr渲染，该怎么样配置呢？

例如用户的注册、登录、设置三个页面

引入了iview插件，提示服务器端渲染失败采用客户端渲染，报错

麻烦帮看下，谢谢

-----------Err------------

webpack: Compiled successfully.
2017-06-22 18:46:41,458 ERROR 19960 [admin/admin.js] server render bundle error, try client render, the server render error ReferenceError: window is not defined
at Object.defineProperty.value (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:233:51)
at webpack_require (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:30:30)
at Object.defineProperty.value (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:6829:15)
at webpack_require (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:30:30)
at Object. (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:25513:3)
at webpack_require (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:30:30)
at Object.defineProperty.value (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:4131:14)
at webpack_require (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:30:30)
at Object. (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:26608:14)
at webpack_require (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:30:30)
at module.exports.rawScriptExports (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:76:18)
at /Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:79:10
at webpackUniversalModuleDefinition (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:3:20)
at Object. (/Users/Qun/WebstormProjects/egg/egg-vue-webpack-boilerplate-master/node_modules/iview/dist/iview.js:10:3)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
[Vue warn]: Property or method "title" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in )
[Vue warn]: Property or method "keywords" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in )
[Vue warn]: Property or method "description" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in )
[Vue warn]: Property or method "baseClass" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in )
2017-06-22 18:46:41,467 INFO 19960 [-/::1/-/179ms GET /admin/] [access] ::1: - GET /admin/ HTTP/200 181581 - 176 - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

打包报错

请问一下是什么原因

demo示例服务端渲染失败 Cannot read property 'render' of undefined

2017-09-06 14:16:13,608 ERROR 11612 [index/index.js] server render bundle error, try client render, the server render error TypeError: Cannot read property 'render' of undefined
    at normalizeRender (H:\egg-vue\egg-vue-webpack-boilerplate\node_modules\[email protected]@vue-server-renderer\build.js:6864:19)
    at render (H:\egg-vue\egg-vue-webpack-boilerplate\node_modules\[email protected]@vue-server-renderer\build.js:7211:5)
    at Object.renderToString (H:\egg-vue\egg-vue-webpack-boilerplate\node_modules\[email protected]@vue-server-renderer\build.js:7647:9)
    at H:\egg-vue\egg-vue-webpack-boilerplate\node_modules\[email protected]@vue-server-renderer\build.js:7956:22
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

app.get('/', 'index.index')

controller/index.js

module.exports = app => {
  return class IndexController extends app.Controller {
    async index() {
      const { ctx, app } = this;
      await ctx.render('index/index.js')
    }
  }
}

服务端渲染的时候会出现regeneratorRuntime is not defined

在本地调试的时候加入babel-polyfill，会解决问题，但上传到服务器的时候，还是会出现错误，把依赖加到dependencies里面也是一样的，有遇到过这样问题的同学么，求解答

为什么表单post请求会提示 invalid csrf token

get请求没问题，但是post请求会提示invalid csrf token

easy-team / egg-vue-webpack-boilerplate Goto Github PK

egg-vue-webpack-boilerplate's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs