關於vue-cli打包配置部署404

在vue腳手架（vue-cli）下我很很快的就可以搭建自己的開發環境，但是我們把項目編寫完后，需要進行打包上線會遇到各種問題，在根據版本問題，（vue3的版本跟之前相比少了很多配置項）,下面是我用老版本進行的一個測試（新版還在研究）

很多時候我們在打包的時候會遇到各種的報錯，

我遇到的問題就是在項目打包不是的時候遇到404和extract-text-webpack-plugin報錯，

1、404，需要跟你相對應的 根目錄下的config下面indiex.js修改，（有的版本是沒有config和build文件的）

2、extract-text-webpack-plugin，可能你的項目中用到過，該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯亂的現象;首先我先來介紹下這個插件的安裝方法，

　　你要先去查看一下，webpack.dev.config.js下面你你有沒有引用該插件，如果沒有你按先引入

　　1.1：const ExtractTextPlugin = require('extract-text-webpack-plugin')

　　1.2：在plugins數組下面添加一下代碼

　　new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: false,
    }),

　　1.3：刪除你的node_modules重新安裝下，然后在執行一下cnpm run build，

 

如果還是extract-text-webpack-plugin有問題，試着更換一下它版本，

下面是根據不同版本搭建的vue項目的目錄

 

 在vue-cli3.0版本后的打包需要自己創建vue.config,js文件（同package.json）因為打包路徑默認  / 我們需要改成 ./

這樣打包上線還是有問題的，因為vue-cli3.0的路由里面

mode: 'history', 默認是history，我們需要把它改成hash

隨后就可以cnpm run build 進行打包部署了