使用vue-cli3新建一个项目并写好基本配置(推荐)

case 'development':
serverurl = appconf.dev.serverUrl
break
case 'alpha':
serverurl = appconf.alpha.serverUrl
productId = appconf.alpha.productId
break
}
// 配置 build 文件输出路径, 可以使用绝对路径或相对路径
var outputDir
var reg = /^.(.)?/.*/
if (reg.test(appconf.build.outputDir)) {
if (process.env.NODE_ENV == 'alpha')
outputDir = path.resolve(__dirname, appconf.alpha.outputDir) // 相对路径
else
outputDir = path.resolve(__dirname, appconf.build.outputDir) // 相对路径
} else {
if (process.env.NODE_ENV == 'alpha')
outputDir = appconf.alpha.outputDir
else
outputDir = appconf.build.outputDir // 绝对路径
}
var conf = {
outputDir: outputDir,
serverUrl: serverurl,
env: process.env.NODE_ENV,
productId: productId
}
module.exports = conf

（3） 在需要用以上变量的地方引入即可，如

.js中：

var { outputDir } = require('./src/common/configByEnv.js');

.ts中：

import {serverUrl} from '@/common/configByEnv.js'；

注意：ts这样引入会报错，需要将tsconfig.json中添加  “allowJs”: true,

——– 上面针对某些变量根据不同环境设置了不同值，那么打包时只要更改环境，打包后则会取到不同环境对应的特定值 —–

因为项目中已经有开发环境和打包build环境，我这里只要再加一个打包alpha测试环境：

（1）package.json 中添加

{
 ···
 "scripts": {
 "serve": "vue-cli-service serve",
 "alpha": "vue-cli-service build --mode alpha",
 "build": "vue-cli-service build"
 }
 ···
}

（2）根目录新建.env.alpha，其内容为：

NODE_ENV = 'alpha'

（3）在vue.config.js设置打包输出路径

var { outputDir } = require('./src/common/configByEnv.js');
module.exports = {
 outputDir: outputDir,
 ···
}

4. 在项目中引入并配置postcss-nextcss

1.

// npm install autoprefixer –save-dev 此步不需要了，因为postcss-cssnext自带这个依赖

npm install postcss-cssnext –save-dev

npm install postcss-import –save-dev

npm install postcss-loader –save-dev

2. package.json中如果没有自动生成以下内容，则手动添加以下内容

{
 ···
 "postcss": {
 "plugins": {
  "postcss-cssnext": {}
 }
 },
 ···
}

5. 引入组件库：我这里用了elementUI，配置步骤：

第一步：进入到项目目录里