npm run build npm run dev

一、以前一直錯的做法

　　　以前,git完專案之後就,執行1.npm install 2.npm run build 3.npm run dev.今天main.js中有一句

window.HOST = HOST,檢視在webpack.base.conf.js中找到原始碼

// define the different HOST between development and production environment
var DEV_HOST = JSON.stringify('http://10.9.240.9:8088/api/')
var PUB_HOST = JSON.stringify('/api')

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: '[name].js'
  },
  eslint: {
    configFile: './.eslintrc.json'
  },
  plugins: [
    new webpack.DefinePlugin({
      HOST: process.env.NODE_ENV === 'production' ? PUB_HOST : DEV_HOST
    })
  ]

在config-->index.js中定義的build和dev

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: { // production 環境
    env: require('./prod.env'), // 使用 config/prod.env.js 中定義的編譯環境
    index: path.resolve(__dirname, '../manage/index.html'), // 編譯輸入的 index.html 檔案
    assetsRoot: path.resolve(__dirname, '../manage/'),// 編譯輸出的靜態資源路徑
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄

    assetsPublicPath: './', // 編譯釋出的根目錄，可配置為資源伺服器域名或 CDN 域名
    productionSourceMap: true, //是否開啟 cssSourceMap

    productionGzip: false, // 是否開啟 gzip
    productionGzipExtensions: ['js', 'css']  // 需要使用 gzip 壓縮的副檔名
  },
  dev: {
    env: require('./dev.env'), // 使用 config/dev.env.js 中定義的編譯環境
    port: 8088, // 執行測試頁面的埠
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: '/', // 編譯釋出的根目錄，可配置為資源伺服器域名或 CDN 域名
    proxyTable: {  // 需要 proxyTable 代理的介面（可跨域）
      '/api': {
        // target: 'http://10.9.65.114:8005',

        // target: 'http://10.9.240.3:8020',
        // DAT
        target: 'http://10.9.240.9:8020',
        // Localhost
        // target: 'http://10.9.240.14:8020',
        pathRewrite: {
          '^/api': '/'
        }
      }
    },

    cssSourceMap: false
  }
}

在package.json中定義npm run build 和 dev 對應的指令

{
  "name": "cloud-vue",
  "version": "1.0.0",
  "description": "cloud-vue made by vue2.0",
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },

那麼接著看這倆檔案

// https://github.com/shelljs/shelljs
require('./check-versions')()
require('shelljs/global')
env.NODE_ENV = 'production'

var path = require('path')
var config = require('../config')
var ora = require('ora')
var webpack = require('webpack')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start()
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
cp('-R', 'static/*', assetsPath)
webpack(webpackConfig, function (err, stats) {
  spinner.stop()
  if (err) throw err
  process.stdout.write(stats.toString({
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }) + '\n')
})

在build-->dev-server.js中

require('./check-versions')()
var config = require('../config')
if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var opn = require('opn')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')

那麼就解釋了 Host 的值 dev 時候走的第15行,build的時候走的第16行,本地執行npm run dev就執行了,不必要執行npm run build 這個是為生成namage對應的檔案包,用於上傳伺服器的

atzhang