参考博客:
vue-cli3项目打包后自动化部署到服务器
vue-cli3如何部署在服务器的tomcat,以及vue.config.js如何配置才能上线(亲测可用)
首先需要保证tomcat服务器在8090端口(我的Vue项目运行在8090端口上)正常运行,并在tomcat的webapps文件夹下创建dist文件夹
1.修改vue.config.js参数
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'));
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
});
},
///这行开始是为了发布设置的参数
//基本路径
publicPath: './',
outputDir: 'dist',
// 放置静态资源的地方 (js/css/img/font/...)
assetsDir: 'static',
//以多页模式构建应用程序。
pages: undefined,
//是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
parallel: require('os').cpus().length > 1,
// 是否为生产环境构建生成 source map?
productionSourceMap: false,
这行结束
devServer: {
port: 8090, // 端口,首先要确认tomcat在8090端口能正常启动
},
lintOnSave: false // 取消 eslint 验证
};
2.修改Router
export default new VueRouter({
mode: 'hash', //为了上线的配置,本地请注释掉
base:'/dist',//为了上线的配置,本地请注释掉
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap //指定路由列表
})
3.增加自动化部署脚本
npm install scp2 --save-dev
和 package.json平级建立upload.js
代码如下(亲测可用):
'use strict'
// 引入scp2
var client = require('scp2');
client.scp('./dist/', { // 本地打包文件的位置
"host": '*****', // 服务器的IP地址
"port": '22', // 服务器端口, 一般为 22
"username": 'root', // 用户名,可以登录服务器的用户名
"password": '****', // 密码
"path": '/usr/local/apache-tomcat-8.5.65/webapps/dist' // 项目部署的服务器目标位置
}, err =>{
if (!err) {
console.log("项目发布完毕!")
} else {
console.log("err", err)
}
})
稍微美化一下控制台的输出(该脚本我并没有测试,此处只是记录)
'use strict'
// 引入scp2
var client = require('scp2');
// 下面三个插件是部署的时候控制台美化所用 可有可无
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在发布到服务器...'));
spinner.start();
client.scp('./dist/', { // 本地打包文件的位置
"host": 'XXX.XX.XX.XXX', // 服务器的IP地址
"port": 'XX', // 服务器端口, 一般为 22
"username": 'XXX', // 用户名
"password": '*****', // 密码
"path": 'XXX' // 项目部署的服务器目标位置
}, err =>{
spinner.stop();
if (!err) {
console.log(chalk.green("项目发布完毕!"))
} else {
console.log("err", err)
}
})
记得项目git上传时忽略此文件, 因为这里面包含了你的服务器地址、用户以及密码
在 package.json中添加 scripts 命令,如下
{
"name": "login",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"upload": "node upload.js",//增加!!!!!!!!!!
"deploy": "npm run build && npm run upload"//增加!!!!!!
},
"dependencies": {
"alipay-sdk": "^3.1.5",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"dns": "^0.2.2",
"element-ui": "^2.4.5",
"js-cookie": "^2.2.1",
"net": "^1.0.2",
"tinymce": "^5.7.0",
"vue": "^2.6.11",
"vue-lazyload": "^1.3.3",
"vue-router": "^3.5.1",
"vue-session": "^1.0.0",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.9.2",
"sass-loader": "^7.0.3",
"scp2": "^0.5.0",
"svg-sprite-loader": "^5.2.1",
"vue-cli-plugin-element": "~1.0.1",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
执行脚本
npm run deploy
此时./startup.sh启动tomcat服务器
访问
http://xxx.xxx.xxx.xxx:8090/dist/#/
(#号部分不加应该也可以)
可以看到项目正常运行