vue项目的打包
一、脚手架创建的vue项目打包
"scripts": {
"serve": "vue-cli-service serve",
//打包
"build": "vue-cli-service build",
}
vite创建的vue项目打包
"scripts": {
"dev": "vite --host=localhost --port=3000",
//vite打包
"build": "vite build",
"preview": "vite preview"
},
二、express部署运行(默认服务器安装node)
1.全局安装express-generator生成器。
npm install express-generator -g
2.创建一个express项目。
express 项目名
3.进入项目目录,安装相关项目依赖。
cd 项目名
npm install
4.将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面,然后运行 npm start
来启动express项目。
5.打开浏览器
输入地址和端口号,就可以看到效果。
三、关闭finalShell ,云服务就断了,网页无法访问
我使用pm2
1.安装pm2
npm i pm2 -g
2.启动项目
pm2 start ./bin/www
四、项目运行的时候一刷新页面就会报404
就是以下的效果
使用connect-history-api-fallback中间件解决
npm install --save connect-history-api-fallback
修改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')));
最后完美解决!!!!