node.js express +vue实现打包桌面应用

RubyLinT

于 2021-08-24 14:19:02 发布

阅读量600

点赞数

本文链接：https://blog.csdn.net/RubyLinT/article/details/119888748

版权

vue 同时被 3 个专栏收录

33 篇文章

订阅专栏

node.js

2 篇文章

订阅专栏

express

1 篇文章

订阅专栏

本文介绍了如何将Vue项目打包并整合到Node.js应用中，包括设置vue.config.js的publicPath，将打包后的静态资源放入Node项目的public文件夹，配置Node路由指向index.html，以及调整package.json确保静态文件被正确打包。关键步骤包括使用npm run pkg命令以确保静态文件的打包，并详细说明了可能出现的问题及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue打包：将vue.config.js里的publicPath赋值'./'，打包。

2.将打包的vue包放入node项目的public文件夹下

3.node创建路由指向前端index.html

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

4.node的app.js文件里加上

app.use(express.static(path.join(__dirname, 'public')));

5.修改package.json文件，加上：

"scripts": {
    "start": "node ./bin/www",
    "pkg":"pkg . -t node10-win-x64"
  },
  "bin":"./bin/www",
  "pkg": {
    "assets": [
      "public/**/*",
      "views/*"
    ]
  }

6.终端运行:注意此处必须要用 npm run pkg，来执行，我原先是直接在终端执行：pkg -t node10-win-x64 bin/www 这样导致没有被引用的静态（即vue打包的static文件夹）不会被打包进项目包。