मैं VueCLI 2 का उपयोग कर रहा हूं और उत्पादन के रूप में निर्माण कर रहा हूं। यह build.js 200KB में बनाया और संकलित किया गया है। जब मैं सर्वर को विकास के रूप में फिर से चलाता हूं, तो उसने 3 एमबी लोड किया। मुझे यकीन है कि डिस्ट फोल्डर के अंदर बिल्ड.जेएस 200KB है। मैंने index.html खोलने की कोशिश की लेकिन यह काम नहीं करता है और वेबसाइट पर रूट डायरेक्टरी पर रीडायरेक्ट करता है।

पैकेज.जेसन

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

वेबपैक

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;
    }
  })
 ])
}

एचटीएमएल

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

कमांड

एनपीएम रन बिल्ड

एनपीएम रन देव

48
Abel 31 अक्टूबर 2017, 14:37

3 जवाब

सबसे बढ़िया उत्तर

npm run build आपके ऐप के प्रोडक्शन बिल्ड के साथ एक dist डायरेक्टरी बनाता है।

किसी ब्राउज़र में index.html परोसने के लिए आपको एक HTTP सर्वर की आवश्यकता होती है।

उदाहरण के लिए सेवा करें:

npm install -g serve
serve -s dist

डिफ़ॉल्ट पोर्ट 5000 है, लेकिन इसे -l या --listen फ़्लैग का उपयोग करके समायोजित किया जा सकता है:

serve -s build -l 4000

दस्तावेज़:

98
Gabriel Bleu 19 अगस्त 2019, 15:43

express के साथ बहुत आसान, और अत्यधिक एक्स्टेंसिबल/कॉन्फ़िगर करने योग्य।

इंस्टॉल करें

npm install -D express

लिखें

सर्वर.जेएस

// 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

8
Steven Spungin 17 जुलाई 2019, 16:42

बिल्ड को सर्वर पर तैनात किया जाना चाहिए, इसलिए, मुझे नहीं लगता कि स्थानीय रूप से बिल्ड चलाने के लिए vue-cli में कोई इनबिल्ट तरीका है।

बिल्ड को स्थानीय रूप से चलाने के लिए, हमें सर्वर को अलग से कॉन्फ़िगर करने और सर्वर पर बिल्ड को निम्नानुसार चलाने की आवश्यकता है,

1) नीचे दिए गए आदेश के माध्यम से लाइट सर्वर स्थापित करें

$ npm install -g lite-server

2) पैकेज में नीचे स्क्रिप्ट जोड़ें।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
0
Parth Patel 23 अप्रैल 2019, 11:13