最近在用nodejs写一点东西,当然也用到了express框架和ejs模版了。在使用ejs模版的过程中遇到了这个问题:如何在ejs模版中导入外部的js、css文件。
我猜测,ejs和html导入外部文件的方式应该是不一样的。但是我还是决定试一试。按照之前在html文件中的方式导入,结果失败。
这也证明我之前的想法,这些静态文件一经过服务器,就不能直接进行导入了。那该如何导入呢?
这是我的文件结构:
我现在需要在index.ejs文件中导入public文件夹下的table.css以及table.js两个文件。
我为什么要将两个静态文件放到public文件夹下呢?
大家应该都知道,在使用express框架时,在安装了express模块之后,在该项目下的命令行输入express -e 就会自动生成相应的文件目录。当然,上面的截图中的目录是我自己写的,下面是express自动生成的目录:
可以看到,其中的public文件夹是其自动生成的,也就是让你放静态文件的文件夹。(当然也不是必须是“public”)
你没有用nodejs的核心编译,而是用nodejs读取的静态文件。由此可见你不是个大前端,你在用C#的思维。。
解决办法两个1.走正路,在server.js使用框架识别html语言。
2.走歪路,读取index.html文件,但是html中必须要使用相对路径。
// 设置静态文件目录app.use(express.static(path.join(__dirname, 'public')))
// 上面没毛病的话就是这样的
<link rel="stylesheet" href="/css/style.css">