Vuejs + webpack - сборка для производства, но развертывание на localhost

Question

Попытка выяснить, как я могу создать производственную сборку с помощью веб-пакета, но сначала запустить его локально в качестве последнего теста перед развертыванием его на сервере.

Я думал о создании другой команды, например, npm run build_localдля этой цели, но не могу понять, как это сделать.

Я вижу следующее в корне package.json, и я думал о том, чтобы как-то объединить dev + build, но не могувыяснить, как это сделать (или использовать конфигурацию в противном случае):

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

Любой совет, как запустить производственную сборку в localhost с помощью команды npm run build_local?

EDIT

Пока я пытался запустить (вручную) http-server ./dist, который, кажется, запускает папку на локальном хосте, но результат фактически отличается от производственного (и dev) поведения -в моем случае он сначала отображает все, как ожидалось, но до тех пор, пока я нажимаю кнопку обновить, он возвращает 404 not found, что является неожиданным (в развернутых версиях dev и на сервере он все равно отображает страницу входа в этом случае):

например, если я открою localhost:8080, vue перенаправит меня на localhost:8080/login, что ожидается и работает нормально.При обновлении это дает 404, хотя.

В идеале я бы ожидал, что он будет работать по крайней мере так же, как dev build на localhost.

Есть идеи?

Answer 1

Так что это было так же просто, как объединить команду dev и предоставить ей конфигурацию prod под корнем package.json:

    "build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
    //

Или в package.json:

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
    "build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
  }

Теперь я могу сделать npm run build_local, который запускает производственную сборку на локальном хосте

Примечание : согласно этому потоку github и этой справочной документации, чтобы предотвратить 404 при обновлении, также добавьте следующее к вашему webpack.prod.conf.js (в любом месте файла, но для справки вы можете вставить его непосредственно перед plugins)

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    historyApiFallback: true, //this line is requried
    compress: true,
    port: 9000
},

Теперь вы можете проверитьпроизводственная сборка под localhost:9000

Если кто-нибудь знает о каких-либо недостатках, дайте мне комментарий или опубликуйте исправленный ответ