webpack打包vue项目

自己总结一下vue项目的打包

1. build文件夹下的utils.js文件 —> 添加：publicPath: “…/…/”,
   

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

2. config文件夹下的index.js文件 — > 找到 build 里面的assetsSubDirectory、assetsPublicPath 改为如下
   

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

    // you can set by youself according to actual condition
    assetsPublicPath: "./",

3. 在命令行中输入 npm run build
   注：package.json文件 —> 找到scripts

• 如果scripts中的build后面跟没有其他东西，直接npm run build就行了

• 如果scripts中的build后面跟着其他东西，类似于下图，那么打包的时候要加上去，即命令行要输入npm run build:prod或者npm run build:sit

• 

4. 打包完之后，文件夹中多了 dist 文件夹，表明打包完成
   

5. 有可能打开index.html页面中图片路径会报错，可以将页面中引入的路径改为"./static…"即可

6. 不管有任何修改，只要文件有改变，就必须重新打包