vue-cli-service使用的入口文件是哪个?
Which is the entry file used by vue-cli-service?
使用 vue
、webpack
、babel
、npm
获得项目。
可以通过 npm run server
启动它,当我试图弄清楚这个命令是如何工作时,我从 package.json.
看到了 vue-cli-service serve
但是,vue-cli-service
如何启动程序呢?我看到 main.js
又渲染 Vue.vue
,两者都在 src/
.
下
没有在任何地方看到配置入口文件,所以 main.js
是 vue-cli-service
的默认入口吗?
代码
package.json:
{
"name": "quizer-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"element-ui": "^2.10.1",
"vue": "^2.6.10",
"vue-router": "^3.0.7"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-plugin-eslint": "^3.9.0",
"@vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue-cli-service
使用 Webpack,默认配置为
entry: {
app: [
'./src/main.js'
]
}
如果您愿意,可以在 vue.config.js
中对此进行更改。参见 https://cli.vuejs.org/guide/webpack.html#simple-configuration
Webpack 将构建一个 JS 包,从 条目 开始,然后将其注入 index.html
文件,这就是您的应用程序启动的方式。
您可以使用
查看应用的完整配置
vue inspect
见https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config
它在 @vue
中被硬编码。
相对路径:node_modules/@vue/cli-service/lib/config/base.js
第 28-37 行:
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)
使用 vue
、webpack
、babel
、npm
获得项目。
可以通过 npm run server
启动它,当我试图弄清楚这个命令是如何工作时,我从 package.json.
vue-cli-service serve
但是,vue-cli-service
如何启动程序呢?我看到 main.js
又渲染 Vue.vue
,两者都在 src/
.
没有在任何地方看到配置入口文件,所以 main.js
是 vue-cli-service
的默认入口吗?
代码
package.json:
{
"name": "quizer-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"element-ui": "^2.10.1",
"vue": "^2.6.10",
"vue-router": "^3.0.7"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-plugin-eslint": "^3.9.0",
"@vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue-cli-service
使用 Webpack,默认配置为
entry: {
app: [
'./src/main.js'
]
}
如果您愿意,可以在 vue.config.js
中对此进行更改。参见 https://cli.vuejs.org/guide/webpack.html#simple-configuration
Webpack 将构建一个 JS 包,从 条目 开始,然后将其注入 index.html
文件,这就是您的应用程序启动的方式。
您可以使用
查看应用的完整配置vue inspect
见https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config
它在 @vue
中被硬编码。
相对路径:node_modules/@vue/cli-service/lib/config/base.js
第 28-37 行:
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)