最近在研究學習vue，發現環境配置特麻煩，就是跟著文檔步驟一步一步來，也會遇到各種想不到的坑，vue-cli3的配置比老的簡潔了很多，與以往的配置也有所不同：

1、安裝步驟以前是

npm install vue-cli -g

現在是：

npm install -g @vue/cli

2、vue-cli2 新建項目

vue init webpack Vue-Project

vuecli3新建項目，在你創建后會有一個保存當前配置的功能

vue create <project-name>

vue-cli2進入到項目，安裝依賴包

 cd Vue-Project  npm install

運行項目

vue-cli2 npm run dev

vue-cli3 npm run serve

vue-cli3 的vue.config.js

//模擬數據const express = require('express')const app = express()var appData = require('./src/data/goodlist.json')var seller = appDatavar apiRoutes = express.Router();app.use('/api',apiRoutes)module.exports = {  // 基本路徑  baseUrl: '/',  // 輸出文件目錄  outputDir: 'dist',  // eslint-loader 是否在保存的時候檢查  lintOnSave: true,  // use the full build with in-browser compiler?  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only  runtimeCompiler: true,  // webpack配置  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md  chainWebpack: () => {},  configureWebpack: () => {},// vue-loader 配置項// https://vue-loader.vuejs.org/en/options.html//vueLoader: {},// 生產環境是否生成 sourceMap 文件productionSourceMap: true,  // css相關配置  css: {  // 是否使用css分離插件 ExtractTextPlugin  extract: true,    // 開啟 CSS source maps?    sourceMap: false,    // css預設器配置項    loaderOptions: {},  // 啟用 CSS modules for all css / pre-processor files.  modules: false},// use thread-loader for babel & TS in production build// enabled by default if the machine has more than 1 coresparallel: require('os').cpus().length > 1,  // 是否啟用dll  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode  // PWA 插件相關配置  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa  pwa: {},// webpack-dev-server 相關配置devServer: {//模擬數據開始  before(app) {    app.get('/api/seller', (req, res) => {      res.json({        // 這里是你的json內容        errno: 0,        data: seller      })    })  },  open: process.platform === 'darwin',    host: '0.0.0.0',    port: 8080,    https: false,    hotOnly: false,    proxy: null// 設置代理},// 第三方插件配置pluginOptions: {  // ...}}

json代碼

{ "list": [  {   "title": "name1",   "id": "0"  },  {   "title": "name2",   "id": "1"  },  {   "title": "name3",   "id": "2"  } ]}

獲取數據輸出vue文件