将vue项目打包并部署到服务器的示例

上一篇文章我写了一些关于vue项目部署到linux服务器的文章，但是它用node作为开发环境pm2守护进程，这样可以正常运行，但是还是有问题，因为是一个和APP交互的页面，在webView中打开太慢，APP的用户体验很差，所以我搜索了一下信息，改变了部署模式。接下来我就介绍一下。

这次，我想以Tomcat为例

我们先来看看Linux中Tomcat下的目录结构：

在/config/index.js中，在用vue-cli搭建的手脚架的webpack的模板下，这里可以看到assetsPublicPath键，有两次，中间我自己挖的坑我就不说了。这里我想说的是两个键都修改过一次，还有一个’。/'已添加。

为什么要在这里改？就是因为路径问题。如果您不更改它，当您将其部署到Tomcat时，将会出现一个空白页面

接下来，我将发布修改后的配置

请使用严格的“//Template version: 1.1.3//有关文档，请参见http://vuejs-templates.github.io/webpack。const path=require(' path ')模块。exports={ build : { env : require(')。/prod.env ')，index : path . resolve(_ _ dirname '，/dist/index.html ')，assetroot : path . resolve(_ _ dirname '，/dist ')，assetsSubDirectory: ' static '，assetsPublicPath: '。/'，productionSourceMap: true，//Gzip默认关闭，因为许多流行的静态主机(如//Sphing或Netlify)已经为您Gzip了所有静态资产。//在设置为“真”之前，请确保设置为：//NPM install-save-dev compression-web pack-plugin productiongzip : false，productiongzipcextensions 3360[' js '，' css']，//运行带有额外参数的build命令//在构建完成后查看包分析器报告： //`npm运行构建-报告`//设置为“真”或“假”以始终打开或关闭bundleAnalyzerReport:进程. env.npm/dev.env ')，port : process . env . port | | 4000，autoOpenBrowser: true，assetsSubDirectory: ' static '，assets publicatpath : '/'，proxyTable: {}，//CSS Sourcemaps默认为off，因为使用此选项时相对路径“有问题”//根据CSS-Loader README/(https://github.com/webpack/css-loader#sourcemaps)//根据我们的经验，它们通常会按预期工作，//在启用此选项时请注意此问题。cssourcemap : false } } assets public path“/”的值是否已更改为。/'

这里我还想提一下中间遇到的坑：

在开发模式下，我们将在这里配置proxyTable: {}。配置它的原因是为了解决开发过程中前端分离和跨域的问题

这是我们通常在这里写的

dev: { env:需要('。/dev.env ')，端口： 4000，autoOpenBrowser: true，assetsSubDirectory: ' static '，assets publicatpath : '/'，代理表： {'/API ' : {更改源： true，目标： ' http://192 . 168 . 0 . 11633608080 '，路径重写3360 { '/API '

当我在这里打包的时候，我把这部分去掉了

成为代理人： {}

同时，我们在开发模式下写axios的时候，会在接口前面加一个“/”API，打包之前也会去掉，变成后端给的接口，这样部署到服务器的时候，接口路径就可以正确了。

接下来，我们需要修改一个地方，vue-router

vue-router用在vue的大部分单页应用中，所以我们需要给src/router/index.js添加一些东西，如下所示：

导出默认的新路由器({mode:' history '，base:'/dist/'，//add place route :[{ path : '/'，name:' index '，Component: index} ]})然后我们执行npm run build，可以找到我们打包的文件dist，它在这个项目的根目录下。我们把它放在Tomcat目录下的WebApps中，然后我们就可以跨域访问你的页面了。

http://59 . 111 . 111 . 11:4000/dist/

注意：记得打开服务器上的端口号，否则访问也会失败。

需要注意的是：在命名图片资源时，不要有中文，因为如果是中文的话，图片在被服务器访问时可能不会显示。

如果你遇到将Vue项目部署到服务器的问题，请点击本文的https://www.jb51.net/article/129750.htm，也许你能找到解决方案

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。