vue脚手架vue cli@4xx使用问题记录

今天需要创建一个vue多入口项目，之前我是使用2.9.6的脚手架创建得，目录复杂，配置多入口相对困难，所以我直接创建了一个@vue/cli@4.4.4版本的项目。创建完直接把相关文件复制过来，但是这样就报错了，主要有以下几个:

we’re sorry but doesn’t work properly without javascript enabled. please enable it to continue.

问题重现

@vue/cli@4.4.4版本的项目目录结构，项目2.9.6的简洁了许多许多

├─babel.config.js
├─package-lock.json
├─package.json
├─README.md
├─src
|  ├─App.vue
|  ├─main.js
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
|   ├─favicon.ico
|   └index.html

@4版本做多入口页面需要使用vue.config.js文件，官网vue.config.js配置参考=》配置参考。

所以在根目录下新建vue.config.js文件。这是我复制其他项目而来的，有一些无关参数，看着烦的可以自行修改，不知道怎么改的就别动，毕竟能运行的代码都是好代码。主要看下pages配置=》pages

const path = require("path");

const resolve = dir => {
  return path.join(__dirname, dir);
};

module.exports = {
  runtimeCompiler: true,
  pages: {
    login: "src/pages/login/main.js"
  },
  publicPath: "./",
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: true,
  configureWebpack: {
    externals: {
      AMap: "AMap",
      AMapUI: "AMapUI"
    }
  },
  chainWebpack: config => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach(type =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
    config.resolve.alias
      .set("@components", resolve("src/components")) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set("@pages", resolve("src/pages"));
    config.module.rule("svg").uses.clear();
    config.module
      .rule("svg")
      .test(/\.svg$/)
      .include.add(resolve("src/assets"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      });
    // config.module.rule('svg').use('svg-sprite-loader')
    //   .loader('svg-sprite-loader')
    //   .options({
    //     symbolId: 'icon-[name]'
    //   })
  },
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
  // 设为false打包时不生成.map文件
  productionSourceMap: false,
  // 这里写你调用接口的基础路径，来解决跨域
  // devServer: {
  //   proxy: 'localhost:3000'
  // }
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:4000",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [
        path.resolve(__dirname, "./src/styles/variables.less") // 需要全局导入的less
      ]
    });
}

此时运行项目，输入http://localhost:8080会发现页面空白，控制台netword会有**we’re sorry but doesn’t work properly without javascript enabled. please enable it to continue.**提示。

解决办法

在路径后面添加入口对象的key。
官方文档是这么说的：每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：

• 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
  或一个指定其 entry 的字符串。

这样问题就解决了

login页面代码

<template>
  <div id="app">
    <img src="@/assets/logo.png" />
    这是登录页111
    <!-- <router-view /> -->
  </div>
</template>

<script>
// import axios from 'axios'

export default {
  name: 'App',
  methods: {
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

问题重现

在控制台会有一个报错

这是因为main.js文件的代码不一样

// 我复制的main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from '@/router'
import './permission' // permission control
import api from '@/api' // 引入api

Vue.config.productionTip = false

Vue.prototype.$api = api

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
// @4版本生成的main.js
// import Vue from "vue";
// import App from "./App.vue";

// Vue.config.productionTip = false;

// new Vue({
//   render: h => h(App)
// }).$mount("#app");

原因就是这个template的使用导致的， @4版本 Vue 组件中不使用 template 选项，而是使用$mount

解决办法

在vue.config.js文件里加上**runtimeCompiler: true,**就行了，官网配置参考直达=》runtimeCompiler。

修改@vue/cli默认启动端口8080

在vue.config.js文件里加上下面这个配置就行了

devServer: {
  port: 3000, // 端口
}