如何在构建 Vue CLI 之后运行生产站点

Question

如何在构建 Vue CLI 之后运行生产站点

node.jsvuejs2production-environmentvue-cli

64

我正在使用VueCLI 2并进行生产构建。build.js已经构建和编译为200KB。当我将服务器重新运行为开发模式时，加载了3MB。我确定dist文件夹中的build.js大小为200KB。我尝试打开index.html，但它不起作用并重定向到网站根目录。

Package.json

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},

Webpack

（中文：Webpack）

module.exports = { ...
module:{
 ...
 plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
 ],
 devtool: '#eval-source-map'
},
...
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
   new webpack.DefinePlugin({
    'process.env': {
     NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,
    compress: {
     warnings: true
    }
  }),
  new webpack.LoaderOptionsPlugin({
    minimize: true
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module) {
      return module.context && module.context.indexOf('node_modules') !== -1;
    }
  })
 ])
}

HTML

→

HTML

<body>
  <script src="/dist/vendor.js"></script>
  <script src="/dist/main.js"></script>
</body>

命令

npm run build

npm run dev

- Abel

5个回答

36

利用Vue CLI的工具，我们可以通过运行以下命令来在本地运行生产版本：

vue-cli-service serve --mode production

为了方便起见，可以将其添加到package.json脚本中：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "production": "vue-cli-service serve --mode production"
  }

指令：

$ npm run production

- Parag Kutarekar

谢谢，运行得很好！ - Ansar Ozden

4

这确实将 NODE_ENV 设置为 "production"。但是，为了提供 dist 文件夹，请考虑直接使用 serve 命令，如其他答案所述。 - Dunc

11

express非常易用，而且高度可扩展/可配置。

安装

npm install -D express

组成

server.js

// optional: allow environment to specify port
const port = process.env.PORT || 8080

// wire up the module
const express = require('express') 
// create server instance
const app = express() 
// bind the request to an absolute path or relative to the CWD
app.use(express.static('dist'))
// start the server
app.listen(port, () => console.log(`Listening on port ${port}`))

执行

node server.js

- Steven Spungin

你知道相比于serve，使用express进行静态文件服务有哪些好处吗？ - Erdal G.

随着更高的复杂度，就会带来更多的自定义选项。 - Steven Spungin

9

Vue CLI 工具（vue-cli-service serve --mode production）对我来说似乎仍在提供开发文件，尽管使用process.env.NODE_ENV === 'production'。

为了提供dist的内容，以下方法适用于我，而无需安装任何额外的软件包：

npm run build
npx serve dist

使用自定义端口和SSL密钥/证书：

npx serve dist -l 8095 --ssl-cert .\cert.pem --ssl-key .\cert-key.pem

您也可以将此命令放入您的package.json中，例如：

  "scripts": {
    "serve": "vue-cli-service serve",
    "prod": "npx serve dist",
    ...
  }

那么只需要执行以下操作:

npm run prod

- Dunc

0

构建应该部署到服务器上，因此，我认为vue-cli中没有内置的方式可以在本地运行构建。

要在本地运行构建，我们需要单独配置服务器并按以下步骤在服务器上运行构建：

1) 通过以下命令安装lite server

$ npm install -g lite-server

2）在 package.json 文件中添加以下脚本

"lite": "lite-server –port 10001",    
"start": "npm run lite"

3) 在根目录下创建bs-config.js文件，并添加以下脚本

module.exports = {
  port: 3000,
  server: {
    baseDir: './dist'
  }
}

4) 最后，通过以下命令运行

$ npm run start

- Parth Patel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriel Bleu · Accepted Answer

npm run build命令会创建一个包含您应用程序生产环境构建的dist目录。

为了在浏览器中服务于index.html，您需要一个HTTP服务器。

例如serve:

npm install -g serve
serve -s dist

默认端口为5000，但可以使用-l或--listen标志进行调整：

serve -s build -l 4000

文档：