webStorm 打包Vue項目

首先，如果需要打包的話，你需要改下資源的路徑
1、打開Vue下的build下面的utils.js文件，添加publicPath：“…/…/”

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

2、打開Vue下的config下面的index.js文件，找到build下的assetsSubDirectory和assetsPublicPath，將它們修改爲如下代碼所示：

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

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

3、在Vue文件夾下打開命令行，輸入 npm run build來進行打包工作，命令行中出現如下所示即可：

4、執行完上一步後，目錄中會出現一個dist目錄，到此就打包完成了：

5、有可能打開index.html頁面中圖片路徑會報錯，可以將頁面中引入的路徑改爲"./static…"即可，改完之後必須重新打包一次。
打包完成之後，代碼中有任何的修改都必須重新打包。

備註：

1.自己的項目文件都需要放到 src 文件夾下；
2.項目開發完成之後，可以輸入 npm run build 來進行打包工作；
3.打包完成後，會生成 dist 文件夾，如果已經修改了文件路徑，可以直接打開本地文件查看；
4.項目上線時，只需要將 dist 文件夾放到服務器就行了。

2020.1.17：

輸入 npm run build來進行打包工作：

打包完成後，會生成 dist 文件夾：

目上線時，只需要將 dist 文件夾放到服務器就行了。