Vue项目build打包、express部署以及问题解决_express打包部署

vue项目的打包

一、脚手架创建的vue项目打包

 "scripts": {
    "serve": "vue-cli-service serve",
    //打包
    "build": "vue-cli-service build",
    }
1
2
3
4
5

vite创建的vue项目打包

  "scripts": {
    "dev": "vite --host=localhost --port=3000",
    //vite打包
    "build": "vite build",
    "preview": "vite preview"
  },
1
2
3
4
5
6

二、express部署运行（默认服务器安装node）

1.全局安装express-generator生成器。

	npm install express-generator -g 
1

2.创建一个express项目。

	express 项目名
1

3.进入项目目录，安装相关项目依赖。

	cd 项目名
1

	npm install 
1

4.将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面，然后运行 npm start 来启动express项目。

5.打开浏览器

	输入地址和端口号，就可以看到效果。
1

三、关闭finalShell ,云服务就断了，网页无法访问

我使用pm2

1.安装pm2

	npm i pm2 -g
1

2.启动项目

	pm2 start ./bin/www
1

四、项目运行的时候一刷新页面就会报404

就是以下的效果

使用connect-history-api-fallback中间件解决

	npm install --save connect-history-api-fallback
1

修改express创建项目下app.js文件

	var app = express();   //express框架模块
	var history = require('connect-history-api-fallback'); //这个是重点

	app.use(history());  //使用history   最好放到pubic静态目录前
	app.use(express.static(path.join(__dirname, 'public')));
1
2
3
4
5

最后完美解决！！！！