vue-cli3.0 進行項目的部署和構建

　　首先如果沒有進行 vue-cli3.0 腳手架的安裝，就要先進行安裝，一下是全局的一個安裝命令

　　　　npm install -g @vue/cli

　　安裝了 vue-cli3.0 之后就可以進行項目的構建了，創建項目的命令是：

　　　　vue create my_pro

　　然后還會展示

　　　　

　　　　可以模板的選擇，可以通過“上”“下”按鍵進行切換，然后按 “enter” 進行下一步；其中，第一個 default 是按照默認的配置進行構建項目；第二個：manually select features ，手動的進行選擇配置項，對項目進行構建；

　　選擇了 “manually select features” 之后，就會進行項目依賴的選擇

　　　　

　　　　通過“上、下” 按鍵進行切換，然后按住 “空格” 鍵進行選擇，選擇之后就會出現 “*” ；選擇完之后 enter 進行下一步；

　　　　

　　　　

　　　　

 

　　　　至此，項目就構建完成了；

　　　　創建完項目之后，一般我們還要進行一些配置，想我們用 vue-cli2.0 的時候，我們可以在 config/dev.env.js 或者 config/prod.env.js  中進行一些環境變量的配置，在 vue-cli3.0 中我們可以在 package.json 中，通過 vue 屬性進行一些配置，像環境變量的配置其實就是 plugins 中 neww webpack.DefinePlugin  的設置，在這里也可以直接在 package.json 中對齊進行判斷，但是在 json 文件中我們必須要按照 json 數據的格式，這樣是很麻煩和繁瑣的， vue-cli3.0 提供了三個文件，可以允許我們進行環境變量的配置，分別是：

　　　　.env、.env.development、.env.production ；一般 .env 是進行總的配置，開發環境生產環境都可以使用； .env.development 是對本地開發環境的配置；.env.production 是對打包時候的環境配置；

　　　　.env.production 雖然是對打包時候的配置，但是不能區分 uat 或者 prd 這樣的多環境，如果想要做區分，可以在package.json 中通過命令，來執行 其他的配置文件；或者在 vue.config.js 中通過 chainWebpack : config => { } 再去根據 process.env.NODE_ENV 配置 config.plugin；再或者就是在 axios 的時候根據訪問地址就行區分； 一般多余多余的地址，像 oss、upload 等服務地址都是固定不變的，直接再 .env.production 進行配置就可以；

 

　　　　在 vue-cli2.0 中，通過 process.env.NODE_ENV 進行判定是什么環境，然后進行 config 中文件的選擇，vue-cli3.0 的原理也是一樣的，通過 process.env.NODE_ENV 進行環境的選擇；這個環境的設置，其實可以在 package.json 中的 script 中進行 npm 指令配置的時候進行選擇，例如： "build": "webpack --env=production"

　　　　我們在 .env.development 中進行環境變量的配置，相對 vue-cli2.0 進行配置的時候相對簡單一點，不用注意 單引號 ‘ ’ 以及雙引號 “ ” 的問題；例如：

                   VUE_APP_URL = '開發環境'

 

　　　　 除了環境變量的配置，有時候我們還會進行 devSever 的配置，以及線上打包路徑的配置，vue-cli3.0 我們可以自己手動的創建一個 vue-config.js 進行配置

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'

module.exports = {
	// 訪問資源的基本路徑，一般不需要進行修改，此處還有疑問，正在驗證中
	// baseUrl: '/',
        publicPath: '/',  //publicPath取代了baseUrl
	// 打包之后輸出文件目錄
	outputDir: 'dist',
	assetsDir: 'assets', // 打包之后靜態資源目錄 (js, css, img, fonts)
	// 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, //關鍵點在這  原來的 Compiler 換成了 runtimeCompiler

	// webpack配置
	// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md   webpack鏈接API，用於生成和修改webapck配置
	chainWebpack: () => {
		if(debug) {
			// 本地開發配置
		} else {
			// 生產開發配置
		}
	},
	configureWebpack: (config) => { // webpack配置，值位對象時會合並配置，為方法時會改寫配置
		if(debug) { // 開發環境配置
			config.devtool = 'cheap-module-eval-source-map'
		} else { // 生產環境配置

		}
		Object.assign(config, { // 開發生產共同配置
			resolve: {
				alias: {
					'@': path.resolve(__dirname, './src') //設置路徑別名
					//...
				}
			}
		})
	},
	// vue-loader 配置項
	// https://vue-loader.vuejs.org/en/options.html
	// vueLoader: {},

	// 生產環境是否生成 sourceMap 文件
	productionSourceMap: true,
	// css相關配置 配置高於chainWebpack中關於css loader的配置
	css: {
		// 是否使用css分離插件 ExtractTextPlugin
		extract: true,
		// 開啟 CSS source maps?是否在構建樣式地圖，false將提高構建速度
		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 cores 構建時開啟多進程處理babel編譯
	parallel: require('os').cpus().length > 1,
	// 是否啟用dll
	// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
	// dll: false,

	// PWA 插件相關配置
	// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
	pwa: {},
	// webpack-dev-server 相關配置
	devServer: {
		open: process.platform === 'darwin',
		host: '0.0.0.0',
		port: 8080,
		https: false,
		hotOnly: false,
		proxy: null, // 設置代理
		before: app => {}
	},
	// 第三方插件配置
	pluginOptions: {
		// ...
	}
}

 

　　對於線上打包之后如何進行設置相對路徑或者決定路徑的切換，在 vue-cli2.0 中可以通過 config/index.js 中對 build 屬性值的編輯進行設置

                  // Paths
                  assetsRoot: path.resolve(__dirname, '../dist'),
                  assetsSubDirectory: 'static',
                  assetsPublicPath: './',

 

 　　但是在 vue-cli3.0 中不能進行 build 的配置，我們只能通過 vue.config.js 中的  publicPath 進行配置，配置成什么地址，那么打包之后，index.html 中的js、 css 等資源的路徑就是這樣的，此處，有些文檔上給出的是 baseUrl，但是目前好像是支持 publicPath；如果配置了 baseUrl 也能編譯打包成功，但是會提示  "baseUrl options in vue.config.js is deprecated now,  plate use publicPath instead"  例如：publicPath 設置成了 “http://www.baidu.com” 的結果

<!DOCTYPE html>
<html lang=en>

	<head>
		<meta charset=utf-8>
		<meta http-equiv=X-UA-Compatible content="IE=edge">
		<meta name=viewport content="width=device-width,initial-scale=1">
		<link rel=icon href=http://www.baidu.com/favicon.ico>
		<title>demo01</title>
		<link href=http://www.baidu.com/css/about.cb417211.css rel=prefetch>
		<link href=http://www.baidu.com/js/about.ab6eb584.js rel=prefetch>
		<link href=http://www.baidu.com/css/app.0c449fbc.css rel=preload as=style>
		<link href=http://www.baidu.com/js/app.78a2a43f.js rel=preload as=script>
		<link href=http://www.baidu.com/js/chunk-vendors.c6093fef.js rel=preload as=script>
		<link href=http://www.baidu.com/css/app.0c449fbc.css rel=stylesheet>
	</head>

	<body>
		<div id=app></div>
		<script src=http://www.baidu.com/js/chunk-vendors.c6093fef.js></script>
		<script src=http://www.baidu.com/js/app.78a2a43f.js></script>
	</body>

</html>