《基于 Vue 组件库 的 Webpack5 配置》9.module.exports 可为数组类型且注意编译顺序

  • module.exports常见是对象类型,其实也可用数组类型;
  • 注意编译顺序,从后往前 编:
    • 也就是说先编 another.js,再编 index.js
    • 所以代码第 9 行不能设置为 true,仅在第一次,也就是代码第19行设置一次即可清空整个 output 文件夹;
    • 如果代码第 9 行设置为 true,则在编 index.js时,会删除another.js 已编译好的文件;
module.exports = [
    {
        mode: 'production',
        entry: {
            "indexs": './index.js' ,
        },
        output: {
            filename: '[name].js',
            // clean: true, 
        }
    },
    {
        mode: 'production',
        entry: {
            "another": './another.js' ,
        },
        output: {
            filename: '[name].js',
            clean: true, // 在每次构建前清理 output 文件夹
        }
    }
];
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目中,你可以按照以下步骤配置main.js、router.js和App.vue文件: 1. 首先,确保你的Vue项目已经安装了Vue CLI和Webpack。如果没有安装,请先执行以下命令进行安装: ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目,并进入项目目录: ``` vue create my-project cd my-project ``` 3. 在src目录下创建一个main.js文件,并在其中添加以下代码: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') ``` 这里导入了Vue、App.vue组件和router.js路由配置文件,并创建了一个Vue实例,将router实例注入到Vue实例中。 4. 在src目录下创建一个router.js文件,并在其中添加以下代码: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from './views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'home', component: Home }, // 其他路由配置 ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` 这里导入了VueVueRouter,并创建了一个路由实例,定义了一个名为Home的路由组件。 5. 在src目录下创建一个App.vue文件,并在其中添加以下代码: ```vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> <style> /* 样式配置 */ </style> ``` 这里定义了一个根组件App.vue,其中使用了<router-view>标签来渲染路由组件。 6. 在项目根目录下的vue.config.js文件中,添加以下配置: ```javascript module.exports = { // 其他配置 chainWebpack: config => { config.resolve.alias.set('@', resolve('src')) } } ``` 这里的配置是为了让webpack能够正确解析@符号,使你在引入模块时可以使用@符号代替src路径。 这样,你就完成了main.js、router.js和App.vue配置。你可以根据需要在router.js中添加更多路由配置,以及在App.vue中添加其他组件和样式。记得在index.html中添加一个id为"app"的div元素作为Vue应用的挂载点。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值