vue 脚手架3+

参考：https://blog.csdn.net/guochanof/article/details/90182409

1、目录结构：https://segmentfault.com/a/1190000014456796

2、配置 代理：https://segmentfault.com/a/1190000014474361?utm_source=channel-hottest  或 https://blog.csdn.net/huangjianfeng21/article/details/92005441（推荐比较详细）

　  注意：代理的匹配越精准 越好，不然 如果页面的url 也匹配到 到，就会把 页面url 也给转发了。

　  案例【同事出现的问题】：vue-cli 中的 代理就碰到过两次这种 匹配不精准导致的 问题。一次是 下面的代理匹配规则，把上面的匹配规则包含了。导致上面的的代理 一直 是用下面的代理转发，导致错误。

　　　　　　　　　 　　　　 另 外一次是 代理的匹配 规则中 把页面 url 页 页 给匹配进去了，导致 页面 url 发送请求时，也被转发处理了，获取不到正确的页面。　　　

3、使用history模式的路由：https://blog.csdn.net/qq_42881675/article/details/103006905  或   https://blog.csdn.net/weihaifeng163/article/details/100603315（推荐）

　　路由配置： router.js

export default new Router({
  mode: 'history',
  base: 'root-dir', // 需要配置此项来设置路由的基础路径，不然路由表只会按根路径来匹配
  routes: [
    {
      name: 'Root',
      path: '/',
      component:Root
    },
    {
      path: '*',
      redirect: { name: 'Root' }
    }
  ]
})

　　项目配置：vue.config.js【项目根目录下，手动创建的】

module.exports = {
  publicPath: '/root-dir/',        // 配置网站的根目录，不配置此项就无法加载各种资源，js，css等
  outputDir: 'dist/root-dir',    // 可以不配，配置后再build后会直接打包在‘dist/app’文件下，直接拖到服务器覆盖就行
}

　　nginx 配置：

    location /root-dir {
        alias /var/www/html/root-dir;                 # 解析到此路径
        try_files $uri $uri/ /root-dir/index.html;    # 解析方式。先地址，再路径，都找不到就直接发送 /root-dir/index.html
    }

4、vue-cli3 分环境打包：https://www.jianshu.com/p/4d1d94b5099a（亲测有效）【vue-cli3号称0配置，确实简化了很多东西】     或    https://www.cnblogs.com/XHappyness/p/9337229.html（内容说明比较详细）

 　  这样以后 线上环境再多也没有影响了，一般公司自有两个环境，测试环境 和 正式环境；规范的公司会加一个 预发布环境。

　　注：.env 文件中，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。   https://www.cnblogs.com/liubingboke/p/11347498.html   或  https://cli.vuejs.org/zh/guide/mode-and-env.html（vue-cli官网）

5、 

---

vue中使用typescript

参考：https://www.jianshu.com/p/9eca70b033da

一、