| 「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」 |
|---|
本地的项目用ip访问
在config/index.js文件中的：host由localhost改为0.0.0.0
本地模拟跨域
在config/index.js文件中:
module.exports = {
dev: {
// 静态资源文件夹
assetsSubDirectory: 'static',
// 发布路径
assetsPublicPath: '/',
// 代理配置表，在这里可以配置特定的请求代理到对应的API接口
// 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
// 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: {
'/api': {
target: 'https://www.bullbigdata.com/', // 接口的域名
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/api': ''
}
},
}
}
注意： '/api' 为匹配项，target 为被请求的地址，因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉。
VUE静态资源目录src/assets和static/区别
src/assets通过webpack处理的资源-
首先我们需要了解webpack如何处理静态资源。在*.vue组件中，所有的html模板和css都会被vue-html-loader和css-loader压缩并且查找资源路径。例如，(../logo.png)和background:url(../logo.png)，'../logo.png'是一个相对路径的资源文件，会被webpack处理成一个模块依赖。
因为logo.png不是javascript，当要视为一个模块依赖时，我们需要使用url-loader和file-loader来处理。这个模板已经给你配置了这些loader，所以你可以轻易得到如指纹文件和Base64内联的功能，同时能够使用相对路径，从而不必担心部署。
因为这些资源可能会在构建过程中被内联/复制/重命名，它们本质上还是你的一部分源代码。这就是为什么建议要将通过webpack处理的静态资源放置到/src目录、与其余的代码放在相同的地方。实际上，你甚至都不必将它们放置到/src/assets文件夹中：你可以把他们放到具体的模块/组件 目录中来使用。咧如，你可以将每一个组件放到它们自己的目录中，靠着它们的静态资源。
-
资源处理规则
- 相对路径url列如.lassets/logo.png会注入到一个模块依赖中。他们会基于你的webpack输出配置，自动替换生成的url。
- 无前缀的url，列如assets/logo.png会被视为相同的相对路径Url，被编译进./assets/logo.png。
- 带有前缀的额url，会作为一个模块的请求，类似于require('some-module/image.png')。如果你希望当做一个模块来处理，你就需要使用这个前缀。例如你有一个assets的别名需要处理，你需要使用(~assets/logo.png)来确认别名被注意到。
- 根目录相对路径，例如/assets/logo.png直接不支持这种写法
-
获得JS文件资源路径
- 为了使webpack返回正确的资源路径，你需要使用require('./relative/path/to/file.jpg')，这样的话会通过file-loader处理并返回处理过的url路径。例如：
computed:{ background(){ return require('./bgs/' + this.id + '.jpg') } }
-
src/assets“真的”静态资源//config.js module.exports = { build:{ assetsPublicPath: '/', // assetsPublicPath: './', assetsSubDirectory:'static' } }
