vue脚手架vue cli@4xx使用问题记录
今天需要创建一个vue多入口项目，之前我是使用2.9.6的脚手架创建得，目录复杂，配置多入口相对困难，所以我直接创建了一个@vue/[email protected]版本的项目。创建完直接把相关文件复制过来，但是这样就报错了，主要有以下几个:
we’re sorry but doesn’t work properly without javascript enabled. please enable it to continue.
问题重现
@vue/[email protected]版本的项目目录结构，项目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
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: '原因就是这个template的使用导致的， @4版本 Vue 组件中不使用 template 选项，而是使用$mount
解决办法
在vue.config.js文件里加上**runtimeCompiler: true,**就行了，官网配置参考直达=》runtimeCompiler。
修改@vue/cli默认启动端口8080
在vue.config.js文件里加上下面这个配置就行了
devServer: {
port: 3000, // 端口
}