vue(3.0)项目搭建以及vue.config.js基础配置

最新推荐文章于 2024-08-08 22:20:54 发布

hhh

最新推荐文章于 2024-08-08 22:20:54 发布

阅读量5.9k

点赞数 2

分类专栏： Vue学习

本文链接：https://blog.csdn.net/weixin_43978501/article/details/107481497

版权

Vue学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

前端需要不断学习进步，fighting！

1、首先需要安装环境

vue install -g vue@cli【vue需要是3.0以上版本，通过vue --version验证】

2、通过命令行创建新项目，vue3.0创建项目的命令行与之前有所不同

vue init webpack 【项目名】//之前的命令行
vue create 【项目名】//vue3.0创建项目的命令行，简单明了

3、选择项目配置：

选择配置方式：第一个为默认配置，第二个为手动配置（下键切换)

在这里插入图片描述

选择手动配置后，你可以选择需要哪些配置项。空格是选中和取消，a键是全选，i键是反选。这里我选择了babel转换器，Router路由，vuex状态管理，css预处理器，eslint风格检查。
这一项是询问是否开启路由的history历史模式，输入Y就开始历史模式，输入n就使用默认的hash哈希模式。
下一项是选择css预处理器，更具需要选择。
接下来是eslint配置，选择 ESLint + Standard config：
接下来选择代码检查时间：在保存时进行代码检查：
最后一项是选择在哪里存放Babel，postcss，eslint等配置。如果项目不大可以选择放在package.json里面。但是为了规范起见，最好还是选择第一项，放在专用的配置文件中。
最后还会询问你是否将本次配置作为以后的默认配置，建议N，因为每个项目的情况很可能不一样。
最后等待项目进度完成。

4、项目配置
创建项目完成后你会发现，现在项目的文件有所不同，会发现相比于vue-cli2.0少了build与config文件夹，所以vue-cli3提供了一个可选的配置文件 ——vue.config.js。

文件目录如下：
在这里插入图片描述

5、vue.config.js文件配置
vue.config.js是一个可选的配置文件，如果项目根目录有这个文件，那它就会呗@vue/clin-service自动加载。配置如下，详情可见：Vue CLI ｜配置参考

module.exports = {
    baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
    outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
    assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
    indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
    pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
        index: {//除了 entry 之外都是可选的
            entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
            template: 'public/index.html',// 模板来源
            filename: 'index.html',// 在 dist/index.html 的输出
            title: 'Index Page',// 当使用 title 选项时,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
            chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk

        },
        subpage: 'src/subpage/main.js'//官方解释：当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'
    },
    lintOnSave: true,// 是否在保存的时候检查
    productionSourceMap: true,// 生产环境是否生成 sourceMap 文件
    css: {
        extract: true,// 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false,// 开启 CSS source maps
        loaderOptions: {},// css预设器配置项
        modules: false// 启用 CSS modules for all css / pre-processor files.

    },
    devServer: {// 环境配置
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        open: true, //配置自动启动浏览器
        proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true

            },
            '/foo': {
                target: '<other_url>'

            }

        }

    },
    chainWebpack: config => {
        // 修复HMR
        config.resolve.symlinks(true);
    },
    css: {
        //extract: true,// 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false,// 开启 CSS source maps
        loaderOptions: {},// css预设器配置项
        modules: false// 启用 CSS modules for all css / pre-processor files.
    },
    pluginOptions: {// 第三方插件配置

    }
}