VUE项目打包成静态资源加到新的vue项目中

1.项目1 打包

需要修改的文件：

build文件夹中webpack.base.conf.js文件

  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath:"./"            //这行是修改后的，注释掉的是原代码
    // publicPath: process.env.NODE_ENV === 'production'
    //   ? config.build.assetsPublicPath
    //   : config.dev.assetsPublicPath
  },

config文件夹中的index.js文件

build内

  // assetsPublicPath: '/',
    assetsPublicPath: './',

build文件夹内的utils.js文件

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'      //新增这一行
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

打包 npm run build

dist文件夹下面就是静态资源文件

 

2.引入新项目

1 格式化静态文件的Html代码，并分块加入到新项目的index.html中。

2 dist下文件夹的static、文件夹重命名，放入到新项目的static文件夹中。

3 修改index.html中的引入文件地址和目标文件一致

4 删除router下的index文件

5.删除APP.VUE的引入

6引入自己的组件到静态资源文件中。引入方式？？？异步加载