Question

我使用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

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

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

命令

npm run build

npm run dev

Answer 1

npm run build创建一个build目录，其中包含您应用的生产版本。

要在浏览器中提供index.html，您需要一台HTTP服务器。

您可以使用任何所需的服务器，以下是serve的示例：

npm install -g serve
serve -s dist

Answer 2

非常容易表达，并且高度可扩展/可配置。

安装

npm install -D express

撰写

server.js

const express = require('express')
const app = express()
app.use(express.static('dist')) // absolute or relative to CWD
const port = 8080
app.listen(port, () => console.log(`Listening on port ${port}`))

执行

node server.js

Answer 3

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

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

1）通过以下命令安装lite服务器

$ 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

Answer 4

只需通过运行以下命令即可使用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

如何在构建vue cli之后运行生产站点

4 个答案: