VUE生成项目，懒人说明，持续更新，当前v1.0

谁天天安装node，天天新建vue项目，所以把做过的配置留存下来，以后自己忘了可以查，也写出来希望得到更多指正。

第一步 安装NODE，VUE等前置工具

谁天天建下载安装node，vue，我也记不住，不过很多地方都可以看教程，我经常去捡现成的，略过。

第二步 创建VUE项目

如果项目开发频繁的话，隔一两个月就会进行一次如下操作。

vueDEMO就是在当前文件路径下新生成一个vue项目的文件夹，这是文件夹的名称。
以上就是擦行间VUE项目的简单开始。

第三步及之后开始写关于VUE项目创建之后的配置。

关于选NO的几项是什么：

ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。

选No则可以进行不严格代码开发，比如可以多打几个回车，可以不写分号结尾等。

unit test是Python单元测试框架，类似于JUnit框架

e2e或者端到端（end-to-end）或者UI测试是一种测试方法

以上两个，我目前还没有用到过。接手同事代码的时候，她安装了，但是除了看配置文件的时候有冗余代码，她也没用到过。

关于e2e，感兴趣的可以查看：

https://mp.weixin.qq.com/s/BeJ2vuibs2Jj9BbsUTcwjA

如果你选择安装，在package.json中可以看到这些：

第三，优化配置

在完成第二步的时候，一个可以使用的VUE项目就已经配置完成了。
可以开始创建组件，配置路由，运行成为一个可用的vue项目。
但是，第一次使用VUE的时候，比较麻烦的，给人印象比较深的问题有：
测试环境、生产环境，灰度环境，要分别改动，以便对应打包。本地访问服务器接口被拒绝，需要配置代理。打完包发现没有dist路径，html就找不到对应的scripts，但我不想带着dist的文件夹名字发布到服务器上。等等。
所以这时候的VUE项目还可以继续优化配置。
按照正常开发的顺序，目前能想到的优化功能排序如下。

1.配置打包功能（设置不同命令一键打包对应文件，再也不用更换域名、参数了）

• 需要安装cross-env。

npm i cross-env 或者 npm i --save-dev cross-env
建议使用–save-dev
cross-env的版本7仅支持Node.js 10和更高版本，以便在Node.js 8或更低版本的安装版本6上使用
npm install --save-dev cross-env@6 此命令安装版本为"cross-env": “^6.0.3”,
建议使用–save-dev。关于–save-dev和–save的区别：
https://blog.csdn.net/cvper/article/details/88728505

之后可以配置package.json中的scripts项。下图中的build:test明明看个人喜好。
对应的，在config文件夹中，创建名字与最后面的对应的js文件：
test.env.js/grey.env.js/final.env.js。
该js文件内格式如下：

'use strict'
module.exports = {
	NODE_ENV:'"production"',
	BASE_URL:'"http://www.test.com/"',	//测试环境域名
	TEST_KEY:'1111111'	//测试环境传参

cross-env的还有一些其他用法，参见：https://www.npmjs.com/package/cross-env
估计能看我这懒人说明书的，应该也懒得看，所以我加了删除线~~

2.配置代理（本地访问服务器，被无情拒绝，）

打开config文件夹下的index.js文件。初始内容如下：

把proxyTable:{}中替换为如下代码(**尾巴上带上斜杠**)：
proxyTable: {
        '/api/cs': {
            target: 'http:/www.test.com/yuming1/', //这里面是你要访问的IP地址
            changeOrigin: true,     //开启代理
            pathRewrite: {
              '^/api/cs': '/'	//这里是配置的代理的名称，可以是单层，也可以是多层。
          }
        },
        '/api/scc': {
            target: 'http://www..test2.com/yuming2/', //这里面是你要访问的IP地址
            changeOrigin: true,     //开启代理
            pathRewrite: {
              '^/api/scc': '/'
          }
        }
    },

代理设置之后，要重新启动项目，才能生效。调用方法（前面加上斜杠）：

this.$getData.get('/api/scc/ssoredis/getdata',param).then(res=>{}).catch(er=>{})

打包时不需要删除你设置的的代理域名。
这里的$getData是对axios的进一步封装，也可以直接this.axios()。
axios出现跨域问题，本地当然可以配置代理。
但是发布到服务器上，对应的是配置服务器转发。
或者后台开放你所在页面域名访问权限。
如果嫌弃axios麻烦，可以直接安装引用jsonp，但是jsonp无法进行post传参。当然也可以引用jquery。
本文暂时不多赘述。

3.更改打包规则（）打包的文件都在dist下面，而且传到服务器如果没有dist就访问不到），设置。

这个有一些解决办法，需要改动的代码依然在config文件夹下的index.js文件中，在build中。

个人理解，核心改法其实只有一个改法，就是把‘assetsPublicPath’的值从相对路径改成绝对路径。
其实这点完全可以从打包好的index.html中对比出来。当然，也可以改成相对路径如下所示

*
## 第一种改法，只改assetsPulnbicPath，按照如下格式，打包出来的文件夹名称还是dist,但是你可以随便改名随便发布到任意路径。
*
index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

打完包查看index.html，会发现src是绝对路径

*
## 第二种改法，仍然是改assetsPulnbicPath。
按照如下格式，把你想要的newName放进去，打包出来的文件夹名称还是dist，
但是发到服务器上时，服务器路径必须是https://xx.com/XX/XX/newName/index.html。
*
index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/newName/',

打包出来的是相对路径，如下：

自我验证了一下，发现之前设想的另一种打包路径实现上有点小问题，已经去掉。