## 參數配置
### 1、路徑：
在table.vue組件中導入loading.vue組件
```
import Loading from '../../../components/loading/loading.vue'
```
使用這種方式導入文件不方便，并且容易出錯。項目結構如下，其中**build文件夾為項目構建\(webpack\)相關代碼**
### 解決方法： 別名配置
```
查看 build / webpack.base.config.js文件。
```
```js
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
.......
resolve: {
.....
alias: {
'@': resolve('src'),
'common': resolve('src/common'),
'components': resolve('src/components'),
'api': resolve('src/api'),
}
},
}
```
在table.vue組件中，可以改修為：
```js
import Loading from 'components/loading/loading.vue'
```
**在vue文件使中**，用別名路徑加載靜態資源時\(樣式文件，圖片等\)，需要在路徑前加上波浪號\(~\)，以下是home.vue組件的部分代碼。
```js
<template>
......
<img src='~common/images/logo.png'>
.....
</template>
.....
<style lang="stylus" rel="stylesheet/stylus">
@import 'scss_vars'
....
</style>
```
## 2、本地圖片無法顯示
#### 通過v-bind指令動態綁定本地圖片資源無法顯示問題。
場景：通過變量保存圖片的src路徑，或者在v-for中循環顯示圖片。
```js
imgUrl : './test.png'
<img :src='imgUrl' /> // 此時webpack只會把它當做字符串處理從而找不到圖片地址(即不會對該圖片進行打包)，無法正確引用該本地圖片
```
解決方法
```
1、將靜態資源圖片放在src同級別的static文件夾中。 webpack將static文件夾中的內容拷貝到項目運行的根目錄下。不會編譯與壓縮
2、imgUrl: "require('./test.png')" ，該方法會將圖片轉成base64存在內存中
3、import avatar from './logo.png'
imgUrl : avatar
```
###
## 3、前后端分離，前端請求后臺api接口
#### 場景
在開發環境下，通過 `npm run dev` 在本地運行項目。 vue -cli 將會在本地啟動一個node服務器。（http:loaclhost:8080）
當訪問其他后臺api時，因為vue的localhost與訪問域名不一致導致，會出現跨域問題。vue-cli通過代理服務解決該問題。
代理服務：簡單理解為把你的域名轉換成你訪問的域名，形成同源，就能訪問。
#### 代理設置
在config /index.js 文件中，
```js
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target:"http://172.16.61.118:8086",//設置你調用的接口域名和端口號 別忘了加http
changeOrigin:true,
pathRewrite:{
'^/api':''//這里理解成用‘/api'代替target里面的地址，后面組件中我們掉接口時直接用api代替
//比如我要調用'http://40.00.100.133:3002/user/login'，直接寫‘/api/user/login'即可
}
}
}
```
當然，在項目上線后，還是需要配合后臺進行跨域設置的。
#### 注意
當項目采用單點登錄時，通過代理轉發后臺請求會導致
> 登錄頁請求seesion和index頁請求的seesion不一致。
此時，不能再使用后臺代理功能。
## 4、開發環境下，讓別人可以訪問你的項目
#### 場景
在開發環境下，通過 `npm run dev` 在本地運行項目。 當項目進行到一定階段時，通常對需求方進行項目展示。vue-cli默認開啟的node本地項目其他人是無法訪問的，
#### 修改項目啟動的host
在config > index.js 下面，修改host的值。例如：
```js
module.exports = {
dev: {
......
// host: 'localhost', // can be overwritten by process.env.HOST
host: '0.0.0.0' // 或在改成本地電腦 IP
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
.......
```
此時，不能通過localhost:8080來訪問項目，需要通過 http://yourip:8080 訪問。
