vue --- 项目的一些问题

1.npm run dev运行后浏览器自动打开项目

打开package.json文件，添加--open

2.同一局域网下其他电脑访问本地项目，修改端口号

打开config下的index.js，把host改为0.0.0.0之后，打开cmd，使用ipconfig查看自己的电脑IP地址，打开项目时就可以把localhost换为自己的电脑IP地址了，并且同一局域网下别人输入这个地址也可以访问，这是cli2.0，cli3.0会自动生成一个别人可以访问的地址。把port改为8085就是把自己的端口号设置为8085；

3.webpack打包后出现空白页面

项目完成后运行打包命令npm run build，找到dist文件夹下的index.html页面，打开之后会出现空白页，这是因为打包路径有问题，打开config下的index.js，build里面的assetsPublicPath是修改打包之后的路径，默认是assetsPublicPath：'/"，也就是根目录，而index.html和static在同一级目录下面，  所以前面加个"."，改为assetsPublicPath：'./'，打包之后路径就正常了；

4.打包后文件过大

1.config/index.js中的productionSourceMap: true改为productionSourceMap: false

2.设置vue-router的路由懒加载

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      // component: resolve => require(['../view/home.vue'], resolve),
      // component: (resolve)=>require(['../view/home.vue'],resolve),
      component: ()=>import('../view/home.vue'),
      meta: {title: 'home', requireAuth: false}
    }
  ]
})

3.在 package.json 中配置如下命令npm run analyz，运行即可查看

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

5.解决跨域问题

1.谷歌浏览器跨域：在桌面上找到谷歌的快捷方式图标，右键单击，打开属性，如下图在目标中添加 --disable-web-security --user-data-dir=C:\chromedata即可跨域，注意前面有空格，这种方法适用于Chrome 版本在49之后，如果Chrome 版本在49之前，添加 --disable-web-security，不过不建议使用这种方法

2.nginx反向代理：在config文件夹下的index文件中找到proxyTable配置反向代理服务器

// nginx反向代理配置
    proxyTable: {
      '/api': {
        target: 'http://xx:xx:xx:xx:xxxx', // 通过本地服务器将你的请求转发到这个地址
        secure: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api':'/'
        }
      }
    },

6.http-server是一个基于Node.js的简单零配置命令行HTTP服务器，本地开发完成后但未上线，想要看在服务器下运行情况，这是就可以使用http-server了，安装命令

npm install http-server -g

启动http-server命令就是在cmd下直接输入http-server，之后就可以浏览器访问http://localhost:8080. 默认web目录是当前目录，，默认端口是8080，如果想改变端口和地址采用如下方式，参数-a是监听地址，而参数-p是修改监听端口。

http-server <path> -a 0.0.0.0 -p 8080