Vue+ElementUI打包到任意路径

问题描述

在使用Vue+ElementUI打包的时候，默认是打包到dist文件夹下，当使用Tomcat作为Web服务器时候，需放入将dist里面的内容放到Tomcat的ROOT文件夹下。在实际项目中，一个Tomcat下可能会有多个项目，所以需要将项目打包到任意文件夹下，然后放到Tomcat下webapps下。

理论知识

要解决上述问题，需要了解config目录下index.js中下面代码的含义：

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    .......

index: 模板,也就是主HTML文件
assetRoot: 打包后文件要存放的路径
assetsSubDirectory: 除了 index.html 之外的静态资源要存放的路径，
assetsPublicPath: 代表打包后，index.html里面引用资源的的相对地址

理解了上述几个配置的含义以后，就可以随心所欲的进行打包了。

实战实例

**实例需求：**将项目打包到MapDome文件夹下，然后将MapDome文件放到Tomcat的webapps下，通过http:localhost:8080/MapDome可以访问项目。
**解决方法：**修改config目录下index.js中以下代码

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../MapDome/index.html'),//将dist改成MapDome

    // Paths
    assetsRoot: path.resolve(__dirname, '../MapDome'),//将dist改成MapDome
    assetsSubDirectory: 'static',
    assetsPublicPath: './',//在“/”前添加“."
    .......

然后，运行npm run build即可。
#需注意的问题
1.通过axios或其他方式请求static目录下的静态资源时候，目录必须以static/或./static开始， 建议以“static/”开头，如：axios.get("static/data/test.json)。
2.Element UI打包后样式丢失问题：在build下utils.js中相应位置添加

publicPath: '../../'

修改后结果如下：

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'       //解决打包后找不到样式问题
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

3.其他问题暂未发现，如您遇到其他问题，请留言共同交流。

扫描下方二维码，关注微信公众号，精彩内容同步更新