手把手教小白部署vue教程

最近在家写了个vue的demo，想着双十一买的服务器，就想把它部署上去给朋友们玩玩。奈何太菜，之前没有接触过服务器部署，就上网搜各种教程，但总有些不对劲。下面就当是自己的一个总结吧。

1.安装java环境 jdk

2.配置Tomcat

以上两步就不再赘述了，照着网上的教程一步一步来就OK啦。

3.在Tomcat的webapps下创建文件夹

我的项目名称为Pleasure，所以创建一个Pleasure的文件夹，后续会用到。这里以自己的实际项目为准。

4.在vue项目config/index.js文件中，设置assetsPublicPath: ‘/Pleasure/’

这里改为这个配置之后，最后编译产生的index.html中相关路径也会带上’/Pleasure’，不会报404的错误了。

5.在vue项目config/index.js文件中，配置productionSourceMap: false

6.在build/webpack.prod.config.js文件中，找到output，添加publicPath:’./’

 output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    publicPath:'./'
 }

7.在build/webpack.base.config.js文件中，一样找到output，做如下修改

 output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? "./"+config.build.assetsPublicPath
      : "./"+config.dev.assetsPublicPath
  }

8.再到vue项目路径运行npm run build，生成dist文件夹

9.将dist文件夹复制到我们第3步创建的文件夹里，启动Tomcat即可

10.最后访问ip:port/Pleasure/dist/index.html

如在服务器上访问 http://localhost:8080/Pleasure/dist/index.html

其他的访问 http://49.XXX.XXX.XXX/Pleasure/dist/index.html

demo地址我会在下篇文章写vue前端跨域后放出来。

本人也是小白一枚，希望可以和大家多多交流，一起成长，冲冲冲。