vue+koa+sequlize 搭建使程序员专注业务代码开发框架---环境区分及views相关配置(二)

　　项目中区分了开发环境和线上环境的不同情况。

　　一、开发环境

　　开发环境下前端使用webpack-dev-server、后端直接nodemon运行就可以了。

　　但是还是有一些问题的。由于我希望开启的webpack-dev-server我并不是直接访问，我需要使用后端的访问链接直接显示页面，例如前端运行之后使用的是8080端口，而后端是3000.那么我在访问localhost:3000的时候就可以直接访问到页面。所以这就需要一些简单的配置了。

　　在这里后端使用了nunjucks模板引擎。我们在后端的模板拼接的时候需要在其中插入一个script标签，用来引入相关的js文件。

　　使用nunjucks模板引擎的目的是希望按照业务进行划分不同的页面。这样就可以区分不同的业务代码。后期维护的时候也可以清晰一些。

　　在其中碰到一些小坑需要补充一下。

　　1.<script src="localhost:8080/dist/main.js">对于开发环境下引用js文件可以使用这样的方式去引用。但是有个问题就是实际上我们访问的是loaclhost:3000的端口。我们当然可以在server中设置一个拦截器，当它匹配到相关的/dist的时候转发到8080端口下。可是在实际使用对于某些前端框架的实际使用时会出现某些尴尬的跨域问题。从而导致部分的样式(例如字体文件)消失。所以在仔细看过webpack文档后发现可以很简单的将devServer中的publicPath设置成完整的路径'http://localhost:'+ ports +'/dist/' 例如这样的路径，这样我们在启用的时候就可以直接进行引用了。不需要做转发了。同时要记得加上headers对于跨域相关的字段。详细可以查看cliet/config/index.js中的配置

　　2.使用nunjucks模板引擎的时候我是直接用koa-views进行扩展使用的(这里淡淡吐槽一下，koa的设计理念是轻量级。以至于很多东西都需要自己去找解决问题的模块。以至于不熟悉的确实会碰到比较多的坑，但是熟悉了之后感觉这样确实还好。可以很好地定制自己的需求。减少没有用处的代码使用)。在使用的时候我们如果在代码中直接使用script这么引用总感觉有些粗暴，故而我们可以在使用的时候进行扩展。

// 这是在 setting文件夹下 viewsEnv.js的代码
if(process.env.NODE_ENV == 'development') {
    nunjucks.configure([path.resolve(__dirname, '../server/views/pages'), path.resolve(__dirname, '../server/views/common')], { autoescape: true });
    app.use(views(path.resolve(__dirname, '../server/views'), {
      map: {
        html: 'nunjucks'
      },
      options: {
        loadJs(fileName) {
          return `<script src=//localhost:${config.dev.port}/dist${fileName}></script>`
        }
      }
    }))
  } else {
    nunjucks.configure([path.join(__dirname + '/../public/views/pages'), path.join(__dirname + '/../public/views/common')], { autoescape: true });
    app.use(views(path.resolve(__dirname + '/../public/views'), {
      map: {
        html: 'nunjucks'
      },
      options: {
        loadJs(fileName) {
          return `<script src=/js${fileName}></script>`
        }
      }
    }))
  }

------------------------------------------------------------------------------------------------------------------------------------------------------------

// 在view中的html中可以直接使用
{{ loadJs("main.js") | safe}}

　　在使用的时候注意增加loadJs方法 这样在模板引擎中就可以使用了，注意增加safe。否则是使用不了的。当然可以使用同样的方式增加loadcss方法。现在也仅仅是先写了个例子。可能还会有其他的问题。碰到再改啦。

　　二、线上环境。

　　线上环境使用pm2进行启用。上传文件的时候可以完全忽略client文件夹，和常规流程没有什么区别。在client中npm run build。然后在根目录运行bin下的www就可以了。