vue项目打包部署到服务器的方法示例

大佬教程收集整理的这篇文章主要介绍了vue项目打包部署到服务器的方法示例，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

上上一篇我写过一些关于vue项目部署到linux服务器的文章，但是那是以node作为开发环境 pm2 守护进程的方式，让他能正常运行，可是还是出现了问题，因为属于与APP交互的页面，在webView中打开过慢，APP的用户体验非常的差，所以我查找了资料，改变了部署方式，接下来我介绍一下

这一次，我想tomcat为例

我们先看一下Linux中 tomcat下面的目录结构：

以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js，这里可以看到assetsPublicPath这个键,而且还有两次，中间我自己挖过的坑我就不说了，这里要说的是，刚才两个键的后面都进行一次修改，都加一个 './'

为什么要改这里呢，是因为路径问题，如果不修改，部署到tomcat上会出现空白页

接下来我来贴出我修改后的config/index.js的配置

const path = require('path')

@H_466_0@module.exports = {
build: {
env: require('./prod.env'),index: path.resolve(dirname,'../dist/index.html'),assetsRoot: path.resolve(dirname,'../dist'),assetssubdirectory: 'static',assetsPublicPath: './',productionsourceMap: true,// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setTing to true,make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,productionGzipExtensions: ['js','css'],// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// npm run build --report
// Set to true or false to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},dev: {
env: require('./dev.env'),port: process.env.PORT || 4000,autoOpenBrowser: true,assetsPublicPath: '/',proxyTable: {},// CSS sourcemaps off by default because relative paths are "buggy"
// with this option,according to the css-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience,they generally work as expected,// just be aware of this issue when enabling this option.
csssourceMap: false
}
}

大佬总结

以上是大佬教程为你收集整理的vue项目打包部署到服务器的方法示例全部内容，希望文章能够帮你解决vue项目打包部署到服务器的方法示例所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。