vue搭建项目时遇到的一些问题记录

1、用vue-cli模板搭建项目时，在选项 Use ESlint to lint your code（使用ESlint规范代码） 的是时候记得 填 no（对于小菜鸟），否则多个空格都会报错 。

2、创建完成后建议首先修改一下配置文件 config>index.js 

修改build 配置参数：修改assetsPublicPath为 ' ./ '（原本为 ' / '）

如图：

是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

3、开发模式下跨域代理：

打开 config>index.js 

在dev 里面添加 proxyTable 

4、开发环境和发布环境配置不同的接口地址

4.1首先找到

/config/dev.env.js
/config/prod.env.js

4.2 这两个文件就是针对生产环境和发布环境设置不同参数的文件。

我们打开dev.en.js文件。代码如下：

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"//localhost:8880/api/"' //配置开发环境接口地址
});

打开 prod.env.js 代码如下：

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://pile.gantangerbus.com/wxif/"' //发布环境接口地址
};

4.3分别配置好之后就可以在代码中调用了：

//在需要调用接口的组件使用就可以了 
var root = process.env.API_ROOT
//或者可以在全局定义一个全局变量 
var GlobalROOT = process.env.API_ROOT