create vue2. env for project

1. npm init
2. vue init webpack [project-name]
3. npm install node-sass sass-loader pug eslint eslint-plugin-vue eslint-plugin-html axios gsap pixi pug-loader -D]
3.1. 修改 eslint 版本 ＠

build: {

env: envConfig,

// Template for index.html

index: path.resolve(__dirname, '../dist/index.html'),

// Paths

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

assetsPublicPath: envConfig.publicPath,

"eslint": "^3.19.0",

"eslint-plugin-html": "^3.2.2",

4. eslint env @ eslintrc.json

{

"extends": [

"airbnb-base"

],

"env": {

"es6": true,

"browser": true,

"node": true

},

"plugins": [

"html", "vue"

],

"settings": {

"html/html-extensions": [".html", ".vue"]

},

"parserOptions": {

"parser": "babel-eslint",

"ecmaVersion": 7,

"sourceType": "module",

"ecmaFeatures": {

"jsx": false,

"experimentalObjectRestSpread": true

}

},

"rules": {

"comma-dangle": 2,

"comma-style": ["error", "last"],

"no-extra-semi": 2,

"semi-spacing": 2,

"semi": ["error", "never"],

"indent": ["error", 2],

"space-before-blocks": 2,

"no-console": 0,

"no-unexpected-multiline": 2,

"no-multi-spaces": 2,

"no-extend-native": 0,

"import/no-extraneous-dependencies": ["error", {"devDependencies": false, "optionalDependencies": false, "peerDependencies": false}],

"no-var": 0,

"one-var": 0,

"no-unused-vars": 0,

"no-undef": 0,

"no-use-before-define": 0,

"vars-on-top": 0,

"no-tabs": 0,

"func-names": 0,

"no-confusing-arrow": 0,

"import/no-mutable-exports": 0,

"no-alert": 0,

"guard-for-in": 0,

"no-restricted-syntax": 0,

"no-underscore-dangle": 0,

"no-param-reassign": 0,

"dot-notation": 0,

"new-cap": 0,

"no-unused-expressions": 0

}

}

5. pug-loader @ build/webpack.base.conf.js

module: {

rules: [

...(config.dev.useEslint ? [createLintingRule()] : []),

{

test: /\.pug$/,

use: [{

loader: 'pug-loader',

options: {

pretty: false,

self: false,

},

}],

},

@ build/webpack.dev.conf.js

new HtmlWebpackPlugin({

filename: config.build.index,

template: 'tmpl/index.pug',

inject: true,

data: env.data,

@ build/webpack.prod.conf.js

new HtmlWebpackPlugin({

filename: config.build.index,

template: 'tmpl/index.pug',

inject: true,

data: env.data,

6. fill data to config @ config/index.js

dev: {

env: envDevConfig,

@ config/dev.env.js

const test = '"http://leo.abc.com.tw/aa/bb/"'

const tcover = '"https://leo.abc.com.tw/aa/bb/static/img/share_img.jpg"'

const tgcode = '""'

const ticon = '"https://leo.abc.com.tw/aa/bb/static/img/favicon.png"'

const merge = require('webpack-merge')

const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

publicPath: '"/"',

data: {

publicPath: '""',

apiPath: '""',

gcode: tgcode,

gaid: '""',

// meta

url: test,

cover: tcover,

icon: ticon,

},

})

@ config/prod.env.js

const params = process.argv[2]

const folder = params || '/aa/bb'

const shareImg = '/static/img/share_img.jpg'

const icon = '/static/img/favicon.png'

// pug 用需要加雙引號

const tdomain = 'http://thor.iprefer.com.tw'

const test = `"${tdomain}${folder}"`

const tcover = `"${tdomain}${folder}${shareImg}"`

const ticon = `"${tdomain}${folder}${icon}"`

const tgcode = '""'

const odomain = 'https://leo.release.com.tw/'

const official = `"${odomain}${folder}"`

const ocover = `"${odomain}${folder}${shareImg}"`

const oicon = `"${odomain}${folder}${icon}"`

const ogcode = '""'

const isRelease = params

module.exports = {

NODE_ENV: '"production"',

publicPath: `${folder}/`,

data: {

publicPath: `"${folder}"`,

apiPath: '""',

// gcode: isRelease ? ogcode : tgcode,

gaid: '"UA-"',

// meta

// url: isRelease ? official : test,

// cover: isRelease ? ocover : tcover,

// icon: isRelease ? oicon : ticon,

url: '"http://leo.abc.com.tw/aa/bb/"',

cover: '"https://leo.abc.com.tw/aa/bb/static/img/share_img.jpg"',

icon: '"https://leo.abc.com.tw/aa/bb/static/img/favicon.png"',

},

}

7. modified assetsPbulicPath for not application folder @ config/index.js

build: {

env: envConfig,

// Template for index.html

index: path.resolve(__dirname, '../dist/index.html'),

// Paths

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

assetsPublicPath: envConfig.publicPath,

8. file .sh

npm run dev npm run build >> thor npm run build /xs >> release