vue-cli4怎么配置https_（废弃）《shopk》使用vue cli4搭建一个vue3项目（三）

所谓热爱，就是坚持和投入

注：方案已经被放弃了，因为我发现它不兼容UI组件，没解决也不想爬坑，因为前端这目前不重要（罒ω罒），而且突然想到前端需要做SEO，考虑直接上SSR技术解决方案，所以切换技术方案，具体方案看下篇文章：《shopk》用Nuxtjs搭建一个前端项目

前言

• 因为前段时间听到了vue3发布的消息，所以正好趁此机会，必然要体验一下新技术，万万没想到vue3的官网说需要使用vue cli4.5来创建vue3的项目，我去，年轻人不讲武德，来骗，来偷袭，我一个老菜鸡，学不动了学不动了，去年刚开始使用vue cli3，今年又变了？虽然有点蒙，但也只好冲了！
• 本篇文章主要记录的是vue项目的搭建和相关配置

1、升级环境

1.1、检查node环境

• 查看node环境，node -v，发现是v12.13.0，没什么问题。

1.2、更新vue cli

• 如果之前版本是2.x或者1.x，需要先卸载npm uninstall vue-cli -g
• 输入npm install -g @vue/cli全局更新vue cli版本，啪的一下很快啊，一个vue -V，已经更新好了。

2、创建项目

2.1、创建名为shopk的项目

• 输入npm init vite-app shopk回车，创建成功
• cd shopk进入shopk项目，执行 npm install 安装相关组件
• npm run dev 回车，成功启动

3、配置项目

3.1、文件夹创建

3.2、修改vite.config.js配置

const path = require('path')
// vite.config.js # or vite.config.ts
console.log(path.resolve(__dirname, './src'))
module.exports = {
  base: process.env.VUE_APP_BASE_URL,
  outDir: 'dist',
  port: 3000,
  // 是否自动在浏览器打开
  open: true,
  // 是否开启 https
  https: false,
  // 服务端渲染
  ssr: false,
  // 引入第三方的配置
  optimizeDeps: { 
  },
  alias: {
    // 键必须以/开始和结束
    '/@/': path.resolve(__dirname, './src')
    // '/@/': root, -- vite 内部在用，这里不能用了
    // '/root/': __dirname, -- vite 内部在用，这里不能用了
    // '/@components/': path.resolve(__dirname, './src/components')
  },
  proxy: {
    '/test': {
      target: 'xxx.xxx.xxx:xxx',
      changeOrigin: true,
      pathRewrite: {
        '^/test': '/'
      }
    },
    // 简写格式
    // '/test': 'http://xxx.xxx.xxx:xxx',
  }
}

3.4、package.json

 {
   "name": "shopk",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite --mode dev",
     "build:test": "vite build --mode test", //带上环境变量
     "build:prod": "vite build --mode prod"
   },
   "dependencies": {
     "vue": "^3.0.2"
   },
   "devDependencies": {
     "vite": "^1.0.0-rc.8",
     "@vue/compiler-sfc": "^3.0.2"
   }
 }
 ​

3.5、环境变量文件

• .env.dev，本地环境变量

 NODE_ENV = 'development'
 VUE_APP_TYPE = 'dev'
 VUE_APP_HOST = 'http://localhost:3000'
 VUE_APP_BASE_URL = '/'

• .env.prod，生产环境变量

 NODE_ENV = 'production'
 VUE_APP_TYPE = 'prod'
 VUE_APP_HOST = 'https://shopk.tunyar.com'
 VUE_APP_BASE_URL = './' //这个值根据实际项目调节

4、结尾

• 到这里基本完成初步搭建，后面就是写静态页面、业务逻辑。

---

本文作者《猿氏·凯》，如果雷同，纯属抄袭····