真的没有办法了，请问用webstorm创建的纯express项目该如何正确植入vue作为前端？

  • Z时代
  • 2024-02-06
  • 分类：IT

在尝试使用express+vue，但是根据网上的教程，在views层搭建了vue项目后仍然会出现问题
具体来说就是，node中导入axios这种包使用require语句，而在vue中，则是用import来导入
这就导致一个问题，我前端html引入了js文件login.js，这个文件用来处理点击操作调用node的接口，如果在这个js文件中使用require，前端就会报错

  • require is not defined，

因为vue并不认识这句话，但是如果使用import，就会报错

  • Cannot use import statement outside a module，

如果我只是简单地将引入js的type写成module，那么就会报错

  • Failed to resolve module specifier "XXX". Relative references must start with either "/", "./", or "../".

按我浅薄的理解，应该是两个项目并没有正确的融合在一起，但是我按照网上的教程都试了一遍实在是不知道正常流程怎么走。

回答：

  1. express 是服务器，没有办法跟前端做同构，将来也不好做 SSR。建议换用 nuxt3，会简单很多
  2. 你的问题是，服务器端使用 commonJS，前端使用 esm，前端可能还要走编译，很麻烦

  3. 除了换 nuxt，你还有两个选择：

    1. 在项目里使用 esm
    2. 分开写两份，服务器和前端分开写
  4. 所以建议还是直接上支持同构、支持 SSR 的框架，Vue 就是 nuxt.js，React 就用 next.js

回答：

这本来就是两个东西呀。

express做后端，vue做前端。拆分俩项目就行。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

开发环境直接分别启动 express，和 vue 两个服务，
生产环境的时候，把 vue 的打包结果放到 views 目录里，然后借助 ejs 等模板直接加载打包后的 HTML 页面
另外建议，将前后端的依赖分别进行管理

回答：

简单理解就是，你的 vue 应用把打包构建的资源放到 express 的某个文件下，然后你基于express 服务去访问这个静态资源入口，也就是 index.html ，然后 html 文件中又被浏览器解析后去加载各种 css 、js 资源保证你的页面正常使用。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

以上是 真的没有办法了，请问用webstorm创建的纯express项目该如何正确植入vue作为前端？ 的全部内容， 来源链接： utcz.com/p/933904.html

回到顶部