Vue3项目创建（包含vue.config.js配置）

---

一、创建

1、版本

//查看vue-cli版本，确保在@vue/cli 4.5.0以上
vue -V

2、创建

//1、配置完成会创建一个vue3的文件夹
在项目目录中（Projects）：vue create vue3

//2、选择vue版本
//选择第3项，手动选择
? Please pick a preset:
  Default ([Vue 2] babel, eslint)           //默认的vue2版本，仅提供babel、eslint
  Default (Vue 3) ([Vue 3] babel, eslint)   //默认的vue3版本，仅提供babel、eslint
> Manually select features                  //手动选择功能

//3、选择项目所需要的功能，按空格选择，按a切换全部，按i反转选择
//选择Choose Vue version、Babel、Progressive Web App (PWA) Support、Router、Vuex、Linter / Formatter
? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
>(*) Choose Vue version                 //vue版本选择
 (*) Babel                              //处理ES6、ES7的新语法
 ( ) TypeScript                        //支持使用TypeScript，若使用TS语法则选择
 (*) Progressive Web App (PWA) Support  //渐进式WEB应用支持
 (*) Router                             //路由
 (*) Vuex                               //状态管理
 ( ) CSS Pre-processors                 //支持css预编译，初始的css将使用该风格的代码
 (*) Linter / Formatter                 //支持代码风格检查和格式化
 ( ) Unit Testing                       //支持单元测试
 ( ) E2E Testing                        //支持E2E测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常
 
 //4、选择Vue.js版本
 //选择3.x
 ? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  2.x
> 3.x
 
 //5、是否使用Class风格装饰器？
 //输入y
 ? Use class-style component syntax? (y/N)
 
 //6、使用Babel与TypeScript一起用于自动检测的填充
 //输入Y
 ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
 
 //7、路由使用history模式？
 //输入Y
 Use history mode for router?(Requires proper server setup for index fallback in production) (Y/n)
 
 //8、选择CSS预编译器（默认支持PostCSS、Autoprefixer和CSS模块）
 //选择Stylus
 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
 
 //9、代码风格检查和格式化配置
 //选择ESLint with error prevention only
 ? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only     //只进行报错提醒
  ESLint + Airbnb config                //不严谨模式
  ESLint + Standard config              //标准模式
  ESLint + Prettier                     //严格模式
  TSLint (deprecated)
  
//10、语法检查方式
//选择Lint on save
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)
>(*) Lint on save           //保存时检查
 ( ) Lint and fix on commit //代码fix和提交时检查

//11、将Babel、ESLint等的配置放在哪里
//选择In package.json
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json

//12、是否将本次配置保存为未来的默认配置
//输入N
? Save this as a preset for future projects? (y/N)

3、配置

• vue-cli3创建的时候并不会自动创建vue.config.js，因为它是一个可选的配置文件，如果你需要修改默认的webpack，则可以手动在根目录下创建
• vue官网配置介绍：https://cli.vuejs.org/zh/config/

//path模块是nodejs提供的用来处理路径的模块
const path = require('path')

module.exports = {
    //部署应用包时的基本 URL，默认'/'
    publicPath: '/',
    //打包时生成的目录，会先把之前打包目录清除，默认'dist'
    outputDir: 'dist',
    //放置打包生成的静态资源 (js、css、img、fonts) 的目录，相对于outputDir目录下，默认''
    assetsDir: 'static',
    //指定打包时生成的index.html的输出路径，相对于outputDir目录下，默认'index.html'
    indexPath: 'index.html',
    //默认情况下，生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存，默认true
    filenameHashing: true,
    //当lintOnSave是一个truthy的值时，eslint-loader在开发和生产构建下都会被启用，如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置
    lintOnSave: process.env.NODE_ENV !== 'production',
    //如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建，默认true
    productionSourceMap: false,
    devServer:{
        //localhost：只能本机localhost访问；固定ip：本机、局域网下只能该ip访问；0.0.0.0：本机通过localhost、ip访问，Network通过ip访问
        host: 'localhost',
        port: '8080',
        //项目启动后是否自动打开浏览器访问，默认false
        open: false,
        //全局的是否https访问，默认false
        https: false,
        //如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器
        proxy:{
            //创建一个虚拟服务器
            //拦截以'/api'开头的请求url，代理到此服务下
            '/api': {
                //后端API服务器地址
                target: 'http://localhost:9999',
                //此服务器是否https访问，默认false
                secure: false,
                //是否代理websockets
                ws: true,
                //是否开启跨域
                changeOrigin: true,
                //路径重写，是一个正则表达式，用于替换'/api'
                pathRewrite: {
                    //例如：'/api/user/list'，拦截到'/api'开头的请求，'^/api'会匹配到'/api'，此时真实的的url：'http://localhost:9999'+''+'/user/list'，即：'http://localhost:9999/user/list'
                    /**
                     * 将匹配到的'/api'替换成空串
                     *  例如：'/api/user/list'
                     *      不重写路径：'http://localhost:9999'+'/api'+'/user/list'
                     *      重写路径：'http://localhost:9999'+''+'/user/list'
                     */
                    ['^/api']: ''
                }
            }
        }
    },
    //webpack配置
    configureWebpack: {
        name: 'vue3',
        resolve: {
            //别名
            alias: {
                /**
                 * @ = 当前文件所处的目录+'src'，绝对路径引入时：.../src/views/Home.vue  =  @/views/Home.vue
                 *      path.join()方法，可以把多个路径片段拼接为完整的路径字符串
                 *      __dirname：当前文件所处的目录
                 */
                '@': path.join(__dirname,'src')
            }
        }
    }
}

4、使用

//安装
num install

//启动
npm run serve

//打包
npm run build