vue相关配置⽂件详解及多环境配置详细步骤
1.package.json
作⽤：
package.json ⽂件其实就是对项⽬或者模块包的描述，⾥⾯包含许多元信息。⽐如项⽬名称，项⽬版本，项⽬执⾏⼊⼝⽂件，项⽬贡献者等等。npm install 命令会根据这个⽂件下载所有依赖模块。
⽂件结构如下：
{
"name": "sop-vue",
"version": "0.1.0",
"author": "zhangsan <zhangsan@163>",
"description": "sop-vue",
"keywords":["node.js","javascript"],
"private": true,
"bugs":{"url":"path/to/bug","email":"bug@example"},
"contributors":[{"name":"李四","email":"lisi@example"}],
"repository": {
"type": "git",
"url": "path/to/url"
},
"homepage": "github/style.css",
"license":"MIT",
"dependencies": {
"bd-font-icons": "^1.1.3",
"core-js": "^3.6.4",
"echarts": "^4.7.0",
"element-ui": "^2.13.1",
"v-charts": "^1.19.0",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuex": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.3.0",
"@vue/cli-plugin-eslint": "^4.3.0",
"@vue/cli-plugin-router": "^4.3.0",
"@vue/cli-plugin-unit-mocha": "^4.3.0",
"@vue/cli-plugin-vuex": "^4.3.0",
"@vue/cli-service": "^4.3.0",
"@vue/test-utils": "1.0.0-beta.31",
"babel-core": "^6.26.3",
"babel-eslint": "^10.1.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"chai": "^4.1.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"bin": {
"webpack": "./bin/webpack.js"
},
"main": "lib/webpack.js",
"module": "es/index.js",
"eslintConfig": {
"extends": "vue-app"
},
"engines" : {
"node" : ">=0.10.3 <0.12"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"style": [
"./node_modules/tipso/src/tipso.css"
],
"files": [
"lib/",
"bin/",
js assign"buildin/",
"declarations/",
"hot/",
"web_modules/",
"schemas/",
"SECURITY.md"
]
}
⽂件参数说明：
这个⽂件保存着项⽬的时候配置的项⽬基本信息，它是个标准的json格式⽂件，编写时要注意格式，重点要关注⼀下scripts⾥⾯的内容，这⾥⾯包含了项⽬的⼀些指令简写，在这⾥可以配置启动不同环境的项⽬的指令。
fig.js
这个⽂件应该导出⼀个包含了选项的对象：
// fig.js
{
// 选项...
}
下⾯是个⽐较完整点的配置实例
// fig.js 配置选项
// 选项
// 基本路径
publicPath: "./",
// 构建时的输出⽬录
outputDir: "dist",
// 放置静态资源的⽬录
assetsDir: "static",
// html 的输出路径
indexPath: "index.html",
//⽂件名哈希
filenameHashing: true,
//⽤于多页配置，默认是 undefined
pages: {
index: {
// page 的⼊⼝⽂件
entry: 'src/index/main.js',
// 模板⽂件
template: 'public/index.html',
// 在 dist/index.html 的输出⽂件
filename: 'index.html',
// 当使⽤页⾯ title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页⾯中包含的块，默认情况下会包含
// 提取出来的通⽤ chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使⽤只有⼊⼝的字符串格式时，
// 模板⽂件默认是 `public/subpage.html`
// 如果不存在，就回退到 `public/index.html`。
// 输出⽂件默认是 `subpage.html`。
subpage: 'src/subpage/main.js'
},
// 是否在保存的时候使⽤ `eslint-loader` 进⾏检查。
lintOnSave: true,
// 是否使⽤带有浏览器内编译器的完整构建版本
runtimeCompiler: false,
/
/ babel-loader 默认会跳过 node_modules 依赖。
transpileDependencies: [ /* string or regex */ ],
// 是否为⽣产环境构建⽣成 source map？
productionSourceMap: true,
// 设置⽣成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
crossorigin: "",
// 在⽣成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启⽤ Subresource Integrity (SRI)。
integrity: false,
// 调整内部的 webpack 配置
configureWebpack: () => {}, //(Object | Function)
chainWebpack: () => {},
/
/ 配置 webpack-dev-server ⾏为。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 查阅 github/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
proxy: {
'/api': {
target: "sdmedia",
changeOrigin: true,
secure: false,
pathRewrite: {
"^/api": ""
}
},
'/foo': {
target: '<other_url>'
}
}, // string | Object
before: app => {}
},
// CSS 相关选项
css: {
// 将组件内的 CSS 提取到⼀个单独的 CSS ⽂件 (只⽤在⽣产环境中)
// 也可以是⼀个传递给 `extract-text-webpack-plugin` 的选项对象
extract: true,
// 是否开启 CSS source map？
sourceMap: false,
// 为预处理器的 loader 传递⾃定义选项。⽐如传递给
// Css-loader 时，使⽤ `{ Css: { ... } }`。
loaderOptions: {
css: {
// 这⾥的选项会传递给 css-loader
},
postcss: {
// 这⾥的选项会传递给 postcss-loader
}
},
// 为所有的 CSS 及其预处理⽂件开启 CSS Modules。
// 这个选项不会影响 `*.vue` ⽂件。
modules: false
},
/
/ 在⽣产环境下为 Babel 和 TypeScript 使⽤ `thread-loader`
// 在多核机器下会默认开启。
parallel: require('os').cpus().length > 1,
// PWA 插件的选项。
// 查阅 github/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
pwa: {},
// 三⽅插件的选项
pluginOptions: {
// ...
}
}
3.多环境配置
⽇常项⽬中我们可能有多个环境，常见的开发、测试和⽣产，它们的接⼝地址和执⾏操作也是不⼀样的，所以我们需要配置不同的环境，就拿基本的开发、测试、⽣产三个环境来说。
⾸先在根⽬录下新建.env.dev、.st、.env.prod⽂件(开发、测试、⽣产)
⽂件内容：
例如：
在main.js中配置接⼝地址指向配置⽂件的地址
修改package.json⽂件中scripts中编译指令即可进⾏不同环境的配置，–mode后⾯指向不同的配置⽂件.env.dev、.st、.env.prod
运⾏npm run dev即可访问开发环境接⼝
运⾏npm run test即可使⽤测试环境接⼝
运⾏npm run prod即可访问⽣产环境接⼝
例如：
configureWebpack: (config) => {
if (v. VUE_APP_MODE === 'prod') {
// 为⽣产环境修改配置...
}else v. VUE_APP_MODE === 'test'){
// 为测试环境修改配置...
}else {
// 为开发环境修改配置...
}
Object.assign(config, {
// 开发、测试、⽣产共同配置
resolve: {
alias: {
'@': solve(__dirname, './src'),
'@c': solve(__dirname, './src/components'),
'@p': solve(__dirname, './src/pages')
} // 别名配置
}
})
},
打包同理
"build:dev": "vue-cli-service build --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod"
运⾏npm run build:dev即可构建开发环境
运⾏npm run build:test即可构建测试环境
运⾏npm run build:prod即可构建⽣产环境
总结
到此这篇关于vue相关配置⽂件详解及多环境配置详细步骤的⽂章就介绍到这了，更多相关vue 配置⽂件多环境配置内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。