vue项目打包上线

一、打包过程

1. 运行命令：cnpm run build  

    1.2. 得到的 dist文件夹有两个文件（static：文件夹；index.html：文件）。保证 index.html 文件可以在本地正常打开

2. 将打包得到的dist 放到服务器上（Apache Tomcat的服务器一般放在 webapps文件夹下面）

3. 利用服务器域名打开 dist/index.html (文件)即可

二、可能遇到的问题

1. 本地正常。打包好的dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND

解决办法： 
在webpack.prod.conf.js 中output添加参数 publicPath: ’./’

在webpack.base.conf.js里 

publicPath: process.env.NODE_ENV === 'production'
      ? './' + config.build.assetsPublicPath
      : './' + config.dev.assetsPublicPath

如果使用的是 vue-cli3 及以上版本，需要把vue-router的 history 模式去除（服务器配置后可用）

// router/index.js

export default new Router({

// mode: 'history'

)}

2. 改变打包后的文件夹名字（即dist => xxx） 

修改config/index.js 里面的 build 属性，即：

3. 项目中使用了Iconfont（字体图标），打包后无法显示的问题

Iconfont 开发时是正常显示。打包后本地打开将无法显示，部署到线上即可正常显示。

三、常用webpack配置   ==>>打包静态资源

1. build/utils.js

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
   return ExtractTextPlugin.extract({
     use: loaders,
     publicPath: '../../',           //==>加一行，打包静态资源
     fallback: 'vue-style-loader'
   })
} else {
     return ['vue-style-loader'].concat(loaders)
}

2. config/index.js

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！