## 参数配置
### 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 访问。
