vue项目搭建

Vue-Cli脚手架

官网

vue-cli文档

安装

# 安装最新版本（vue-cli4需要Node.js v8.9 或更高版本推荐 v10 以上）
npm install -g @vue/cli
# 查看vue-cli 版本
vue --version

创建项目

vue create my-project-name

基本流程

1. 第一步：选择重新配置（之前有保存过模板所以会让你是否选择之前的模板）
2. 第二步：选择安装的依赖
3. 第三步：选择安装的vue版本
4. 第四步：选择no
5. 第五步：选择安装哪个css预处理（只有第二步选择了css Pre-processors才会出现）
6. 第六步： 选择安装哪个代码检测工具（只有第二步选择了Linter/formatter才会出现）
7. 第7步：选择代码检查触发的方式
8. 第八步：保存配置（推荐选择第二种）
9. 第9步：是否保存该次配置方便下次使用
10. 目录结构

vue.config.js常用的配置

// 不通版本的vue-cli脚手架，相应的配置也是有所不同的，详细还是要参考官方文档
module.exports = {
	chainWebpack: config => {
    	config.resolve.alias
    		.set('@', resolve('src'))// key,value自行定义，比如.set('@@', 								resolve('src/components'))
      		.set('_c', resolve('src/components')) 
    },
    css: {
        loaderOptions: {
            sass: {
                data: '@import "@/scss/settings.scss";'
            }
        }
    },
    devServer: {
        proxy: {
            '/api': {
                target: '地址',
                changeOrigin: true,
                ws: false,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        },
        overlay: {
            warnings: true,
            errors: true
        }
    }
}

Vite

官网

vite文档
推荐一篇关于vite的文章：https://mp.weixin.qq.com/s/l4pBNCgKZ1uggMvJTaGTsg
注意：vite创建的是vue3项目

安装

# node.js版本呢需大于12
npm init vite@latest

创建vue项目

# 查看npm版本
npm -v

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

目录结构

vite.config.js常用的配置

配置详情还是要参考官方文档

1. 设置别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
const pathResolve = (dirPath) => path.resolve(process.cwd(), dirPath)
export default defineConfig({
  plugins: [vue()],
  resolve: {
  	// 第一种方法
    alias: [
      {
        find: /\/@\//,
        replacement: `${pathResolve('src')}/`
      }
    ],
    // 第二种方法
    alias: {
    	'@': `${pathResolve('src')}`
    }
  }
})

2. 引入css预处理器（全局）

css: {
    preprocessorOptions: {
      scss: {
      	// 路径
        additionalData: `$injectedColor: orange;`
      }
    }
  }

4. 跨域处理
   跨域一般表现在前端在调用后台接口时，浏览器出现的 403 的错误。这是由于浏览器的安全策略：同源策略 。不同域名、协议 、端口 、发送 异步请求时浏览器会阻止这样的行为。
   在开发环境中，你可以启动一个本地的代理服务器来规避同源策略，通过修改 相应的 的配置来实现跨域请求（反向代理）。
   官方配置文档

# 使用的是vite文档的第二种方法（选项写法）
server: {
  proxy: {
    "/api": {
       // 一般情况下测试环境，生产环境等地址是不一样的，所以当你去调试不同环境的代码时，这个target也要去发生相应的改变，并重新运行项目
       target: "http://www.example.org",
       changeOrigin: true,
       rewrite: (path) => path.replace(/^\/api/, ""),
     },
   },
   // 浏览器自动打开应用程序
   open: true,
   // 指定开发服务器的端口号 默认为3000
   port: 3031
 },

它的流程是：前端发起异步请求 -> 请求本地的devServe -> devServe请求远程服务器 -> 远程服务器响应请求，返回内容给devServe -> devServe将内容再传给网页

由于服务器之间的通信是没有同源策略限制的，所以我们能利用这种方式处理本地开发是跨域的问题。在实际生产环境你可以这样处理跨域：

1. 找后端配置 cors，cors是一种跨域资源共享策略，允许Web应用访问来自不同源服务器上的指定的资源。
2. 使用http容器，常见的是nginx，做反向代理来处理跨域问题，与本地开发解决跨域的思路相同。
3. JSONP，此方法只适用于get请求。
4. 其它的还有 iframe，domain，postMessage等方式根据实际的场景应用.

环境的区分

一般情况下公司的项目是有很多环境的例如测试，预生产，验证，最后才是生产环境，这样做的目的就是为了保证项目功能的稳定性和减少在生产环境中出现的问题。

不同的环境下都会有相应的人员进行测试，验证等，都会产生一系列的bug,需要我们本地运行不同环境下的代码进行bug的验证和修改。本地运行的话很简单上面跨域处理已经讲过只需把target值改成对应的地址重新运行即可。但是打包发布的话需运行不同的命令去加载对应的.env文件了。

1. 默认情况下
   对于不同环境下环境变量具体的值，比如开发环境是 development，生产环境是 production，其实是大家约定俗成的。
   
   
   当你输入npm run serve命令的时候他会默认的去加载.env.development文件。
   当你输入npm run build命令的时候他会默认的去加载.env.production文件。
2. 实际开发
   实际的项目开发中，紧紧这些是不够的，例如一个项目有四个环境：测试，预生产，验证，生产环境。那么这时我们就没有必要按这规范去命名了，只需要保证文件是以.env开头即可。
   既然命名没有规范，那么项目运行的时候，就需要控制它去加载哪个文件，如下
   

.env文件的作用

.env 文件主要的作用是存储环境变量，也就是会随着环境变化的东西，比如数据库的用户名、密码、缓存驱动、时区，还有静态文件的存储路径之类的。

因为这些信息应该是和环境绑定的，不应该随代码的更新而变化，所以一般不会把 .env 文件放到版本控制中。

平常使用的最多的就是存储url地址了，因为在不同的环境，请求的url接口地址是不一样的，使用.env文件的话，那么就不需要频繁的去更改接口请求的地址了

.env存储的环境变量是全局的


注意：Vite脚手架是不支持process的，所以无法通过process.env获取相应的变量，需要使用import.meta.env去进行获取。