Giter VIP home page Giter VIP logo

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

View Code? Open in Web Editor NEW
1.4K 1.4K 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%
axios easywebpack egg egg-webpack isomorphic server-side server-side-rendering ssr vue vue-axios vue-cli vue-loader vue-nunjucks-render vue-router vue-server-renderer vue-ssr vuex webpack webpack3 webpack4

egg-vue-webpack-boilerplate's People

Contributors

hubcarl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

egg-vue-webpack-boilerplate's Issues

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

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

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

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)

服务端渲染如何结合egg-i18n做国际化

使用vue做服务端渲染的时候,好像不能使用egg-18n做国际化,目前能想到的方法只有在Controller中将需要国际化的部分作为参数。有没有更好的解决方案?

在访问路由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)

服务端渲染问题

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

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

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

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,,,菜鸟求解答

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

多页面服务端渲染配置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)
    }
这样就不报错,也能取到值
求解;是不是配置错了

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

egg locals 和 vuex state 问题

https://github.com/hubcarl/egg-vue-webpack-boilerplate/blob/f2659566ac736c1fe99404cdb68081db96b46d73/app/web/framework/vue/app.js#L23
这一块改成这样是不是好些,防止vuex的默认的state丢失
options.store.replaceState(Object.assign(options.store.state, App.data()));

同理
https://github.com/hubcarl/egg-vue-webpack-boilerplate/blob/f2659566ac736c1fe99404cdb68081db96b46d73/app/web/framework/vue/app.js#L47
防止locals丢失
context.state = Object.assign(options.store.state, context.state);

目前服务端渲染是否不支持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

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

vue 渲染方式,controller层无法使用class方式render?

@hubcarl 下面的写法返回404,请问这种方式写法错误呢,还是没有实现这种方式?路由请帮忙指明,谢谢~
router.js

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')
    }
  }
}

transform-runtime

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

打包问题

1、打包后的静态文件的路径是写死的吗?(public)
2、为什么打包的文件会这么大,我什么都还没写都有1m多。

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中怎么能读取到这些配置呢?

这个怎么上正式版呢?

将例子运行start prod 和build 发现样式这些都没跟上,而且单页面应用使用客户端渲染在测试上可以,在正式也不行

引入了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

easywebpack里面怎样加入loaders?

想添加.woff .eot .ttf 等字体加载,要怎样引用?

loaders: [
{
test : /.woff|.woff2|.svg|.eot|.ttf/,
loader : 'url?prefix=font/&limit=10000'
}
]

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)

less 函数,编译不通过

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

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

Uploading image.png…

./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的口子,应该怎么处理,添加路径吗?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.