Vue__npm run build npm run dev

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
  }) + '
')
})

在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