[F2016061801] NodeJS之旅-使用webpack构建项目时遇到__dirname路径不对

最近准备用koa搭建个人博客网站,但在开发前就遇到了很多头疼的问题,比如用koa-views渲染模板,代码和官网的例子一模一样,但就是渲染不出来,提示找不到模板路径,真是头疼,研究了一天也没解决。

现在解决了,索性把解决方法简单记录一下,当时网上搜索了很久也找不到原因,最后还是在webpack官网闲逛的时候发现了问题的根源,所以说平时多逛逛技术网站还是有帮助的。



用koa-views渲染模板时配置的第一个参数是模板文件夹根路径,koa-views仓库里提供的路径是:

views(__dirname + ‘/views‘, {
    map: { html: ‘swig‘ }
}

koa官方给出的示例代码,肯定是对的。但是就是这短短几行代码,到了我手上,偏偏看不到效果。根据调试的结果,才发现路径根本不对,views的第一个参数要求本地路径,而我的代码输出的是/views。问题出在了__dirname上!



点开编译后的代码查看__dirname到底被编译成了什么,一看吓一跳,不是文件夹的路径,而是/。肯定又是webpack的问题!立即跑去webpack官网溜达一圈,发现了一个配置选项:node。原来__dirname的默认值是"mock",即/。要使用普通Node的__dirname,需要设置:

node: {
    __dirname: false
}

这样的话生成的路径就是本地路径了。

时间: 2024-12-15 04:18:20

[F2016061801] NodeJS之旅-使用webpack构建项目时遇到__dirname路径不对的相关文章

[F2016061802] NodeJS之旅-使用webpack构建项目时代码正确但编译出错

遇到这个问题前,我对webpack还不算太熟,仅仅限于用它来编译ES6代码,代码写多了,问题也就来了. 一开始用NodeJS写些小项目,用的模块并不多,遇到些报错问题,改改也就通过了.然而,随着用的第三方模块增多,用webpack构建项目时出现错误的次数越来越多,最奇怪的是:代码检查了十几遍,明明任何错误都没有,编译却通不过.最后只能硬着头皮去看编译后的代码才明白问题出在哪里! 对于webpack,它是自动把依赖都输出到目标文件中.比如: import koa from 'koa' 构建后的输出

Vue2+VueRouter2+webpack 构建项目实战(二):目录以及文件结构

通过上一篇博文<Vue2+VueRouter2+webpack 构建项目实战(一):准备工作>,我们已经新建好了一个基于vue+webpack的项目.本篇文章详细介绍下项目的结构. 项目目录以及文件结构 如图所示: 如上图所示,自动构建的vue项目的结构就是这样. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没有问题,所以我们也不用管 node_modules 项目开发依赖的一些模块 src 开发目录(

Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开的api来做项目.不过本章节不涉及调用接口等内容.这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面.列表页面有分页等,内容页面展示. 因此,我们需要两个模板文件. 我们在src/page目录下面新建两个文件,分别是index.vue和content.vue index.vue代码: <

webpack构建项目

webpack构建项目 源码戳这里 ps:每个案例对应相应的demo,例如"案例1"对应"demo1" 一.webpack基本功能及简单案例 安装webpack $ npm i webpack -g 基本功能 $ webpack -v 查看webpack版本号 $ webpack 最基本的启动webpack的方法 $ webpack -w 提供watch方法:实时进行打包更新 $ webpack -p 对打包后的文件进行压缩 $ webpack -d 提供sourc

webpack 构建项目入门

参考http://www.cnblogs.com/eyunhua/p/6398885.html --------------------------------------------------------------------- 已安装node.js,利用npm输入命令全局安装(-g) npm install webpack -g 安装完后,输入 webpack -v  查看当前webpack的版本号. 正式使用Webpack  进入项目目录,输入命令:npm init,生成package

Vue2+VueRouter2+webpack 构建项目实战(五):配置子路由

前言 通过前面几章的实战,我们已经顺利的构建项目,并且从API接口获取到数据并且渲染出来了.制作更多的页面,更复杂的应用,就是各位自己根据自己的项目去调整的事情了. 本章讲一下如何配置子路由,因为我们的项目不可能只有一个页面,而是由众多页面构成的. 新建子路由页面 在第二节中,我们新建了一个src/frame/subroute.vue的子页面.当时是留空放在那里的.这里,我们给它填写上内容,代码如下: <template> <div> <div class="mai

vue+webpack构建项目

1,下载node 在node官网上下载:https://nodejs.org/en/ 如果已经下载了,可以查看一下版本 cmd中输入node -v 2,下载npm 可以直接下载npm包管理工具或者安装淘宝镜像 如果已经下载了,可以查看一下版本 cmd中输入npm -v (注意:这个必须要3.0.0以上) 3,安装脚手架vue-cli npm install -g vue-cli 这个必须安装在全局中 4,新建一个文件夹demo vue init wenpack demo 这个会出现一些需要自己填

Vue2+VueRouter2+webpack 构建项目实战(四):接通api,渲染列表

通过前面几篇教程,我们已经顺利搭建起来了,并且已经组建好路由了.本章节,我们需要做一个列表页面,然后利用获取 http://cnodejs.org/api 的公开API,渲染出来. 我们打开src/page/index.vue文件,在这里写入下面的代码: <template> <div> <h1 class="logo">cnodejs Api Test</h1> <ul class="list"> <

webpack构建项目连接本机IP仍无法访问问题

通过连接IP地址,确定连接成功后仍无法访问本机运行项目,需要对项目配置进行修改,有两种情况: 第一种是在config/index.js,把module.exports={}中找到 host:'localhost'改为host:'0.0.0.0',保存之后重新启动项目试试(如果没有找到请看第二条). 第二种是在package.json中,找到如下: 并将其改为 host 0.0.0.0 --port 8080 这两种方式都是将host改为0.0.0.0,只是配置的地方不一样而已 原文地址:http